I have a notification list with unread and read sign (red for unread) (no sign if already read)
My problem is when user click on the notification to view it on notification detail page and go back again to the list, the LIST page did not update (we have code to remove the red sign if already read)
Our code is working properly, the only problem is the page does not reload/refresh
I try to navigate on some other page then go back again in notification list, that is only the time it refresh
I put a page back event to (thatâs why there is alert after going back to detail page to list)
here is my video sample
Hi,
in the page back evt try to reload the page;
Methods to reload currently active page:
mainView.router.reloadPage(url) - reload required page to the currently active viewâs page. It will also modify Viewâs history and replace last item in history with the specified url
url - URL of the page to load
here is de documentation v1 Router api
2 Likes
I try this
when user click on back button of detail page, it will reload the list
$$(document).on(âpage:afterbackâ, â.page[data-page=âappointmentdetailâ]â, function(e) {
mainview.router.reloadPage(âappointment_request.htmlâ);
});
THIS DOES NOT WORK, Still not reloading
Video and this piece of code donât tell much. Would be good to see whole relevant code part or even better live example with the issue or JSFiddle with the issue
1 Like
Hello there I will paste the code here the code of both pages just a moment
@nolimits4web
this the code for the NOTIFICATION LIST (page init)
var apiUrl = 'api/exhibitors/requestlist/u/' + userID;
if (localStorage.exhibitors_id != '' && localStorage.exhibitors_id != undefined) {
apiUrl = 'api/exhibitors/exhibitorrequestlist/exhibitors_id/' + localStorage.exhibitors_id;
}
$.ajax({
url: baseUrl + apiUrl,
type: "GET"
}).fail(function() {
}).done(function(data) {
if (data.status === true) {
$$('#appointmentRequestHolder').append(data.request_list);
} else {
$$('#appointmentRequestHolder').append(data.message);
}
});
// IT JUST GET USER ID then GET its notification and append in div
@nolimits4web
This is the code for the NOTIFICATION DETAIL
We pass the notification ID on this page from notification list
var exhibitorsAppointmentId = page.query.id;
if (exhibitorsAppointmentId != undefined) {
$.ajax({
url: baseUrl + 'api/exhibitors/requestdetail/id/' + exhibitorsAppointmentId,
type: "GET"
}).fail(function() {
}).done(function(data) {
// console.log(data);
$$('#companyName').val(data.company_name);
$$('#boothNumber').val(data.booth_number);
$$('#appointment_date').val(data.appointment_date);
$$('#appointment_time').val(data.appointment_time);
$$('#appointment_message').val(data.appointment_message);
$$('#status').val(data.appointment_status);
});
}
so basically when user is in the NOTIFICATION detail , they will go back by click the BACK, to go to notification list, but the RED CIRCLE (unread sign) should be remove
but the NOTIFICATION LIST does not refresh it content, but in our database the specific notification is already unread
@nolimits4web
As shown in the video, the RED CIRCLE should be gone after going back on the notification list,
thats why I need to refresh the that page after going back
Ok so for that you need to somehow reload the list/circle data. To do this i listen to the events
onPageInit and onPageAfterBack
Load your thata for the first time with onPageInit:
myApp.onPageInit('cards', function (page) {
$$.get('https://jsonplaceholder.typicode.com/posts/1', {}, function(res){
console.log(res)
$$('#cardsResData').html(res)
}, function (err) {
console.log(err)
})
})
Reload the data with onPageAfterBack:
myApp.onPageAfterBack('cards2', function (page) {
$$.get('https://jsonplaceholder.typicode.com/posts', {}, function(res){
console.log(res)
$$('#cardsResData').html(res)
}, function (err) {
console.log(err)
})
})
Result:
2 Likes
Hello! I will try your approach
Thanks for replying