Question

I have the following code for a jquery mobile page. When I run it directly, it works, but when I link to it from a different page, it doesn’t load. I’ve tried turning data-ajax off in the referring link, but that made no difference. Any ideas?

Here’s code :

var urlQuery = location.search;
urlQuery = urlQuery.replace('?', '');
var split = urlQuery.split('=');
var id = split[1];

$(document).delegate('[data-role="page"]', 'pageinit', function(){
    $.get('../ws/bars.php?id=' + id, function(data) { 
        $('[data-role="content"]').html(data);
        $('[data-href="specials"]').trigger('click');
    });
});


$(document).delegate('[data-role="navbar"] a', 'click', function(event){
    $('.content_div').hide(); // hide all the .content_div's
    $('#' + $(this).attr('data-href')).show(); // display the div that's been clicked   $('a.pageTab').removeAttr('style'); // remove styling from the buttons
    $(this).attr('style','color: #eee;'); // add styling to the active button
});

Whatever answers I get from this, please give me the why as well as the what so that I can understand what’s going on here.

Thanks!

Answer 1

Your initial $.get() function call appears to be running in the global scope. This means that it runs when the page loads, but not when subsequent pages load because jQuery Mobile pulls external pages into the same DOM via AJAX. So to run your AJAX request for each pseudo-page I would bind to the pageinit event:

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    //run AJAX request
});

Also if you have elements on each page with the following IDs, #sun/#mon/etc. then you should change them to classes or make them unique in some way so you don’t have multiple elements in the DOM at once with the same ID. You can easily select the elements on the current page by using the $.mobile.activePage reference:

$.mobile.activePage.find('.sun')...