Question

I’ve got big HTML page with “divs” that are considered “pages” and, I’m swapping between those “divs“.

I’ve added this code:

$(document).bind('pagebeforechange', function(e, data) {
    if ( typeof data.toPage === "string" ) {
        console.log(data.toPage);
    }
}

And here’s the console log:

#page-main
http://ba.m.p.fr/#page-panier
http://ba.m.p.fr/#page-horaires
http://ba.m.p.fr/#page-horaires&ui-page=1-5
http://ba.m.p.fr/#page-horaire-valider

So, sometimes it’s only the id sometimes it’s the whole URL. How comes?

Answer 1

I’ve made a workaround, this is not an explanation. My old code was like:

$(document).bind('pagebeforechange', function(e, data) {
    if ( typeof data.toPage === "string" ) {
        if (data.toPage == "page-aa" ) {
            /* code for page-aa */
        } else if (data.toPage === "page-bb" ) {
            /* code for page-bb */
        } else if (data.toPage === "page-cc" ) {
            /* code for page-cc */
        }
    }
}

And now my new code is like this: i’m relying on ‘pagebeforeshow‘:

$("div#page-aa").on('pagebeforeshow', function(e, data) {
    /* code for page-aa */
});
$("div#page-bb").on('pagebeforeshow', function(e, data) {
    /* code for page-bb */
});
$("div#page-cc").on('pagebeforeshow', function(e, data) {
    /* code for page-cc */
});

And it works flawlessly. But this is a workaround, not an explanation of my question. Anyway if someone googles for that problem, and reads my question, maybe this workaround will help!