Question

I’m tasked to execute specific page javascript on pagechange in Jquery Mobile (Such as geolocate the user on one page or show a Google map on another page)

Its really not clear how to execute javascript after a pagechange but i’m almost there, i was able to use

$(document).bind('pageinit', function(event){

    loadGmaps();
    geolocate();

});

But the problem is that this code executes on each page change/page init and if i’m not on a page that has a #map tag, it just executes code for nothing. Worst? Jquery keeps pages loaded in memory but hides them. So if i change page, it can reload the map 16 times in a row for nothing.

I’m really confused as to how you are supposed to bind specific page javascript in a jquery mobile loaded page. I’m lurked all around the web and i’m sure i’m not the only one looking for that specific trick…

Thanks

---

EDIT

I changed my code to reflect Jasper’s solution, and it works fine except for the geolocation:

$(document).on('pageinit', '#wp-post-id-70', function(event){
    geolocate();
});
$(document).on('pageinit', '.wp-post-type-spa', function(event){
    loadGmaps();
});

The maps load fine on each page i visit that is a spa, but when i load a spa page from a fresh load, if i click on the logo to go back to the home page, it loads the home page and then fires the “geolocate” function but nothing happens in terms of geolocation:

function geolocate()
{
    if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(
            function(position){
                $('#near_spa').load('?latitude='+position.coords.latitude.toString()+'& longitude='+position.coords.longitude.toString()+' #near_spa > *');
            }
        );
    }else{ 
        alert('Votre navigateur ne supporte pas la géolocalisation ou refuse l\'accès aux données de localisation');
    }
}

The code really goes up to the navigator.geolocation.getCurrentPosition, it gets called but then pffff, nothing. If i reload the home page manually with F5, i now get the geolocation request…

---

EDIT

Never mind that “map” loads fine on each page, it doesn’t anymore, probably me and my brain being too tired…

Therefore, the

$(document).on('pageinit', '.wp-post-type-spa', function(event){
    loadGmaps();
});

Doesn’t load the maps anymore at all and yes, i verified, the pages do feature a wp-post-type-spa class…

Answer 1

If you have code that only runs once per pseudo-page, then use the pageinit event, which only runs once every time a pseudo-page is added to the DOM.

You can also target specific pseudo-pages in your bind call:

$(document).on('pageinit', '#some-map-page', function(event){

    loadGmaps();
    geolocate();

});

This will only run when the pageinit event fires on an element with the ID of some-map-page. You could for example add a class to each pseudo-page element where you want to run the map code:

<div data-role="page" id="some-map-page" class="map-page">...</div>

Which would work with the following event binding:

$(document).on('pageinit', '.map-page', function(event){

    loadGmaps();
    geolocate();

});

Notice that I’m using .on() as a delegated event handler, which is very useful when using jQuery Mobile as you can’t ever be sure when a pseudo-page exists in the DOM.