Page Does Not Reload/Refresh V1

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

Hi!
I have some concerns

  1. what is the back event button?
  2. Where should I put the mainView.router.reloadPage(url) -

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:

result-callback

2 Likes

Hello! I will try your approach

Thanks for replying