Question

Here’s what I want to do:

• load basket using Ajax
• show “wait” message
• once loaded, refresh basket.

When I try to use pageinit function:

$(document).bind('pageinit', function(evt) {
    console.log(evt);
}

Console log show it’s called 29 times!

Everything is on one HTML page, and I’m using $.mobile.changePage() to change pages. So I tried this hack:

$(document).bind('pagebeforeshow', function(evt, pg) {
    if (pg.prevPage.length==0) {
        /* first page = code executed once */
        var pg = $('#page-basket'),
            footer = pg.children( ":jqmData(role=footer)" );
        footer.hide().trigger('updatelayout');
        AjaxGetBasket( function(data) { console.log('ajax basket ok'); });
    }
});

But the layout is never updated.

How shall I do to modify page but only once at the beginning?

Answer 1

Try delegating the pageinit event handler so it only runs when #page-basket is initialized:

$(document).on("pageinit", "#page-basket", function() {
    $(this).children(":jqmData(role=footer)").hide().trigger("updatelayout");
    AjaxGetBasket(function(data) {
        console.log("ajax basket ok");
    });
});