CODEWITHSUNDEEP
eventsjquery-mobile
DroidOS
DroidOS

Reputation: 8880

jQuery Mobile 1.4+ pagecontainerbeforechange bug?

I am experimenting with the new way of handling page events in jqM and have run into a curious issue. When handling the pagecontainerbeforechange event

$(document).on('pagecontainerbeforechange',function(e,u){test(e,u,'changing');})

function test(e,u,msg){console.log($(u.toPage));}

Attempting to put a jQuery object wrapper around u.toPage - as done above - produces strange behavior.

Check out this fiddle to see what I mean

Perhaps someone here might be able to explain what is going on here?

Upvotes: 0

Views: 972

Answers (2)

Omar
Omar

Reputation: 31732

On initial run, jQuery Mobile creates a fake page before navigating to first page in DOM. At that stage, pagecontainerbeforechange fires twice and returns .toPage as an object.

Later on, upon navigating to other pages, it fires twice again; however, it returns a string first time (URL/hash) and second time it returns an object which is the page itself.

Therefore, when using that event, you have to determine whether .toPage is an object or a string.

$(document).on("pagecontainerbeforechange", function (e, data) {
  if (typeof data.toPage == "string") {
    /* parse url */
  }

  if (typeof data.toPage == "object") {
    /* manipulate page navigating to */
  }
});

Note that pagecontainerbeforetransition is similar to beforechange, however, it fires once and returns .toPage as an object.

Upvotes: 3

ezanker
ezanker

Reputation: 24738

First, create your pagecontainer events within $(document).on("pagecreate", "#first", function(){ .. }).

Then the selector for these events should be $(":mobile-pagecontainer") or $("body") NOT $(document).

function test(e,u,msg)
{
    console.log(msg); 
    var IsJQ = u.toPage instanceof $;
    console.log(IsJQ);   
    if (IsJQ){
        console.log(u.toPage.data());   
    } else {
        console.log(u.toPage);
    }
    console.log('---');   
}

$(document).on("pagecreate", "#first", function(){
    $(":mobile-pagecontainer").on('pagecontainerbeforechange', function (e, u) {
        test(e,u,'changing');
    });
    $(":mobile-pagecontainer").on('pagecontainerchange',function(e,u){
        test(e,u,'changed');
    });

});

Updated FIDDLE

Upvotes: 1

Related Questions