Load Page content before page Load JQUERY Mobile

Question

I found lots of questions/answers regarding how to dynamically load page content into a div, however, I can't get mine to load.

Basically I'm creating a webapp where upon clicking a button on the home page (index) it would call a second page (check.html). Before that page is loaded, I'm doing an ajax call to the server which returns a json object, then I'm generating a table with that object. (please see the code below.

Then problem is, when I click, I get to the page (check.html) but the content was not loaded, then when I do a refresh everything is then loaded.

I know it was to do with loading the data before the page is shown, but I can't get it to work. I've tried so many jquery functions (on document ready, on load, and none is working).

Any help woule be appreciated.

$(document).on('pagebeforeshow', '#checkPage', function(){ 

    //validate if the user has entered/save his email address
    if (localStorage.getItem("email") === null){
      $('#noEmail').show();
      $('#issues').hide();
    }else{
      $('#noEmail').hide();
      $('#issues').show();

      var email = localStorage.getItem("email");

        //ajax call to a server to get the json data
        $.ajax({
            url: 'http://landlord.tenantconnectapp.co.uk/webapp/issues.php',
            type: 'POST',
            data: {email: email},

            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                var data = $.parseJSON(result)
                var count = data.length;
                $("#count").append(count);

                var tbl_body = "";
                $.each(data, function (index, issue) {
                  var tbl_row = "";
                  tbl_row += '<th><a href="issue.html" onclick="sessionStorage.ID='+issue['id']+'">'+issue['id']+'</a></th>';
                  tbl_row += "<td>"+issue['createdDate']+"</td>";
                  tbl_row += "<td>"+issue['status']+"</td>";
                  tbl_row += "<td>"+issue['reason']+"</td>";
                  tbl_row += "<td>"+issue['summary']+"</td>";
                  tbl_body += "<tr>"+tbl_row+"</tr>";
                });  
                $("#issuesTable tbody").append(tbl_body);
                $("#issuesTable").trigger("create");
                $("#issuesTable").table("refresh");
                },
            error: function (request,error) {            
                toast('Network error has occurred please try again!');
            }
        });

    }
  });

Answer 1

This is a wild shot but I think I'm right.

You didn't mentioned this but I would bet this AJAX call from your second page is placed inside a HEAD or at the end of your file?

If any of those two is correct then you are doing this in the wrong way.

In few words, when jQuery Mobile starts it will load initial HTML page to the DOM. Because AJAX is used for page handling, when opening subsequent pages, jQuery Mobile will load ONLY data-role="page" div content, everything else is going to be discarded, including HEAD. One last thing, only ONE page is going to be loaded. If you have more then one data-role="page" in your subsequent pages, every page, except first one will get discarded just like HEAD.

When you initiate a refresh that page will not fully load into the DOM thus initializing JavaScript from page HEAD.

Read more about this here + you will find several solutions.