Updating the dynamic PHP in a jQuery Mobile site after updating the database

Question

Let's say I have 2 pages in a jQuery Mobile website.

Page1 - shows data from a database using inline PHP.

Page2 - inserts new data into the database.

The problem is that page1 is not updated when going back, after page2 adds something to the database. I can get it updated by pressing F5, but how can I achieve the same update using jQuery?

Answer 1

I think you're showing data in Page 1 using the pageinit event. This will fire only once and won't update your data every time you add new data.

You need to use pagebeforeshow event of Page 1 to get data from database. This way, new data will be brought every time, which is what you need. Here's a syntax :

 $(document).on("pagebeforeshow", "#page1", function() {
      //call to server
 });

If you're not using pageinit, you must be using document.ready event to get data. Well, thats the way thats done. You must not use ready with jquery mobile. DOM ready will initialize the whole document which will make the ajax page change feature of jQM pointless & useless.

Answer 2

It was late last night and I missed that I should just get my inline php content using Ajax.

So this is how I solved it:

1. Moved everything contain dynamic content using PHP in a separate file.

2. Add an Ajax call to the bottom of the page that loads the PHP file as follows:

   $(document).on('pagebeforeshow', function(){
       $.ajax({
            type: "GET",        
            url: "includes/db/ajax_show_php_content.php",       
            success: function(html) {
               $("#page1").html(html); //Insert PHP content
           $("#page1").trigger('create'); //Apply jQuery Mobile style to it.
       });                 
   }); 
   

Thanks to @hungerpain and @anglinb for their help in figuring this out.

Answer 3

I'm not extremely familiar with jQuery Moblie but here's what I found:

function refreshPage()
{
   jQuery.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
}

I think the reloadPage to true should do the trick.

If that doesn't work, check out this answer: jQuery Mobile Page refresh mechanism

Hope this helps!