How do I know what page is loading with jQuery Mobile?

Question

As I'm learning JQM, I discover that JQM doesn't load pages as a normal browser does. It just fetches the content and updates the DOM.

When the requested page loads, jQuery Mobile parses the document for an element with the data-role="page" attribute and inserts that code into the DOM of the original page.

I mix between physical pages and JQM pages. Pages are loaded using PHP and my tempalte code loosk like this:

include('views/widgets/head.php');
include($view);
include('views/widgets/footer.php');

A view is the same as a PHP page.

Front page
URL: mysite.com
Pages: #frontPage

Page B
URL: mysite.com/page-b
Pages: #listPage, #infoPage, #mapPage

Page C
URL: mysite.com/page-c
Pages: #listPage, #infoPage, #mapPage

My current solutions was to wrap the multipage in a container:

That might explain why I'm having issues with this code:

if($('#frontPage').length > 0) { Lib.setTitle('Front Page'); }
if($('#pageB').length > 0) { Lib.setTitle('Page B'); }
if($('#pageC').length > 0) { Lib.setTitle('Page C'); }

Whenever I navigate back to my front page, it seems the first statement is triggered, then overridden by the last statement triggered. I know because the headline flickers when it is first set to "Front Page" and then overriden by "Page C".

I should probably be using events like pageload, pagebeforeload, pagebeforeshow, but they are so many and "similar" that I'm unsure which one to use.

What is the "correct" way of identifying what page I'm loading so that I can execute the correct functions?
What is the correct code to do execute global functions for any page loaded?

Update
All custom JS files are loaded in the global / external footer.

have you a single Js file for each page. like page1.html-page1.js and page2.html-page2.js. On your html file you just reference the js you need, On your page1 you are sure that there is only the page1.js called. If you want a global js, you need to put on it every fonction that don't need to know the context, like contruct an array or something like that. — dpfauwadel
No, my custom JS files are loaded in the global / external footer — Steven

ezanker ezanker · Accepted Answer · 2015-02-10T14:52:52

You can use the pagecontainer widget's beforeshow event: http://api.jquerymobile.com/pagecontainer/#event-beforeshow

The toPage property of the ui parameter returns a jQuery object of the page you are navigating to. You can then check its ID and display the correct text.

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var pageid = ui.toPage.prop("id");

    if(pageid == 'frontPage') { 
        setTitle('Front Page', ui.toPage); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', ui.toPage); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', ui.toPage); 
    }

});

function setTitle(text, page){
    page.find(".headerText").text(text);
}

DEMO

This will run every time you navigate to the page so you could show different titles each time. If you only ever show the same title, you could use the pagecreate event instead as it only runs once when each page is initially loaded into the DOM:

$(document).on( "pagecreate", function( e ) {    
    var pageid = e.target.id;    

    if (pageid == 'frontPage') { 
        setTitle('Front Page', pageid); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', pageid); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', pageid); 
    }    
});

function setTitle(text, pageid){
    $("#" + pageid).find(".headerText").text(text);
}

DEMO

How do I know what page is loading with jQuery Mobile?

1 Answers