CODEWITHSUNDEEP
jqueryjquery-mobilejquery-mobile-button
ehretf
ehretf

Reputation: 163

JQM back button loses data of previous page

I have an issue with Jquery mobile and back button feature.

I have a page which run a ajax request on a remote server when displayed. Ajax is launched through pagebeforeshow event. This event is attached to the div with [data-role="page"] attribute as I'm using multiple html file:

 <div data-role="page" data-theme="b" id="Favorites">
   <div data-role="content" data-theme="b">
    <div id="Ajax">
            DISPLAY AJAX RESULT CONTAINING LINK TO OTHER HTML PAGE
        </div>
    </div>
 </div>

Here is the javascript:

$('#Favorites').on('pagebeforeshow', function(event) {
   LaunchAjax();   
});

This is working fine when the page is displayed for the first time. However the ajax results contain link to an another page which the user can follows. When the user follow the link I display a back button (generated with jquery mobile) in order for him to came back at the intiale page containing the ajax result.

However when clicking the back button, the initiale page is displayed but blank. I would like to have the last resulted generated by ajax dislayed or at least a way to relaunch the ajax function to display the initiale results.

I have tried to play with with JQM cache:

 $.mobile.page.prototype.options.domCache = true;

But this doesn't solved my issue and the DOM elements look to be not cached correctly (maybe due to the fact that I'm using seperate html files)

I have test my app on Chrome desktop and on Android using phonegap, the issue is present for both.

Does anyone have a right way to do this?

Thanks a lot

Best Regards.

Upvotes: 0

Views: 403

Answers (1)

Gajotres
Gajotres

Reputation: 57319

You are using incorrect way of page event binding. Only way to successfully bind a page event is through delegated binding.

So instead of this code:

$('#Favorites').on('pagebeforeshow', function(event) {
    LaunchAjax();   
});

Use this:

$(documents).on('pagebeforeshow', '#Favorites',function(event) {
    LaunchAjax();   
});

Upvotes: 1

Related Questions