Question

I’d like this AJAX call to load on page load. Right now I need to hit the refresh button for it to load.

Updated code:

$(document).on("pageinit", "#members", function() {
$.ajax({
url: 'data.php',
success: function(data) {    
$("#result").html(data).trigger('create');
$("#result").listview('refresh');
}
});
});

It loads correctly if I type in the page URL, but not when I go through my index.php file.

Answer 1

First,

$("document")

should be

$(document)

because there are no <document> elements and if there were, you wouldn’t be calling .ready() on them.

Next, the reason you are seeing this problem is because $(document).ready() only fires once per full page load. Changing to a new page in jQuery Mobile does not trigger a full page load, instead it loads in the new page with ajax. To get around this issue, jQuery mobile has an event called “pageinit” that gets triggered on the page that gets loaded in. This is how you would bind to it in your case:

pre-jquery 1.7

// yes, i know delegate is better, but the documentation specifically suggested using .live
$("#pageid").live("pageinit",function(){
    $.ajax({
        url: 'data.php',
        success: function(data) {    
            $("#result").html(data).trigger('create');
            $("#result").listview('refresh');
        }
    });
});

post-jquery 1.7

$(document).on("pageinit","#pageid",function(){
    $.ajax({
        url: 'data.php',
        success: function(data) {    
            $("#result").html(data).trigger('create');
            $("#result").listview('refresh');
        }
    });
});

The reason refreshing the page works is because when you refresh the page, the $(document).ready() event happens.