Phonegap/Android pagechange handler firing twice

Question

I have a problem where the pagechange handler is firing twice within my app for some page transitions. In deviceready handler:

$(document).bind("pagechange", onPageChange);

Then the hander:

var onPageChange = function (event, data) {
    var fromPageId = null;

    //Get the ID of the page we are transitioning to.
    var toPageId = data.toPage.attr("id");

    //Get the ID of the page we are coming from.
    if (data.options.fromPage) {
        fromPageId = data.options.fromPage.attr("id");
    }

    console.log("pagechange to " + toPageId + " from " + fromPageId);

    switch (toPageId){
        ...
    }
}

When the app transitions from one page to the next, I can see in LogCat that the onPageChange is firing twice:

01-26 18:49:50.490: I/Web Console(18244): pagechange to care-plan-view from care-plan-view:25
01-26 18:49:50.490: I/Web Console(18244): pagechange to care-plan-view from care-plans:25

This is the order they appear in the log, weird thing is that the care-plan-view is the destination page and the care-plans is the start page!

This is a sample link that will cause the page transition issue:

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

Any ideas why this would be happening?

Cheers, Don

score 1 · Accepted Answer · edited May 23 '17 at 10:24

The reason the pagechange event occurs twice is due to the recursive call in changePage when toPage is not a jQuery enhanced DOM object.

This recursion is dangerous, as the developer is allowed to change the toPage within the event. If the developer consistently sets toPage to a string, within the pagechange event handler, regardless of whether or not it was an object an infinite recursive loop will result.

The pageload event passes the new page as the page property of the data object (This should be added to the documentation, it's not listed currently). The pageload event could therefore be used to access the loaded page.

In few words this is happening because you are sending additional parameters through pageChange.

To fix this problem choose an another page event, like:

event pagebeforecreate
event pagecreate
event pageinit
event pagebeforehide
event pagebeforeshow
event pageremove
event pagehide
event pageshow

More about this problem can be found in my blog ARTICLE, just search for the chapter: Prevent multiple event triggering. Or you can find it HERE.

Phonegap/Android pagechange handler firing twice

1 Answers1