CODEWITHSUNDEEP
phpjqueryjquery-mobilemobilerefresh
MacBryce
MacBryce

Reputation: 133

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

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?

Upvotes: 0

Views: 774

Answers (3)

MacBryce
MacBryce

Reputation: 133

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.

Upvotes: 1

krishwader
krishwader

Reputation: 11381

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.

Upvotes: 1

anglinb
anglinb

Reputation: 985

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!

Upvotes: 0

Related Questions