jQuery Mobile Switch to "page" thats already in dom with .changePage()

Question

Right now my DOM has three divs with data-roll="page", all of them have unique id's. If I use the following code it works but jQuery Mobile is creating a new node rather than switching to the already existing node.

$('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        console.log(nextpage);
        $.mobile.changePage(nextpage.attr('id'), {transition: 'slide'});
    }
});

I have also tried passing just nextpage to the .chagePage method but when ever the pages have an id set I get the following error.

TypeError: b.split is not a function

So I'm looking to switch directly to the already existing "page" thats in the DOM rather than create a new one from my swipeleft handler.

I'm using jQuery 1.7.1 and jQuery Mobile 1.1.1

Jasper · Accepted Answer · 2012-08-06T19:01:58.560

Have you tried passing-in a jQuery object rather than a string?

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
    if ($nextPage.length > 0) {
        $.mobile.changePage($nextPage, { transition: 'slide' });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    // swipe using id of next page if exists
    if ($prevPage .length > 0) {
        $.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
    }
});

Here is a demo: http://jsfiddle.net/V3CXF/

Otherwise I think you have to prepend a hash mark to your string ID to make it a valid selector:

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
    if ($nextPage.length > 0) {
        $.mobile.changePage('#' + $nextPage[0].id, { transition: 'slide' });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    // swipe using id of next page if exists
    if ($prevPage .length > 0) {
        $.mobile.changePage('#' + $prevPage[0].id, { transition: 'slide', reverse : true });
    }
});

Here is a demo: http://jsfiddle.net/V3CXF/1/

Notice I swapped .live() out for .delegate() as .live is now depreciated (as of jQuery Core 1.7). If you are using jQuery Core 1.7 or newer, you can use .on() instead.

Docs for .live(): http://api.jquery.com/live

I have tried to pass the object to it and have tried your sugjestion of prefixing the id with #. Both result in this error in firebug. TypeError: b.split is not a function — hcker2000, Aug 06 '12 at 17:48
@hcker2000 I added demos to show my code working. See here: http://jsfiddle.net/V3CXF/ — Jasper, Aug 06 '12 at 19:03
Thanks I'm not sure if this is a bug or not but for some reason if you use a number as the id it fails to work. There has to be some text in the id for it to work correctly. I also reworked the js fiddle a bit to work with 1.7+'s .on method and it will work with the jquery object rather than the id too. http://jsfiddle.net/qGJpt/7/ — hcker2000, Aug 06 '12 at 19:36
@hcker2000 That is because starting an ID with a number is invalid. Here is a great answer to a S.O. question regarding valid IDs: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Jasper, Aug 06 '12 at 19:37
I remember reading that spec some place a while back. I guess normally I just never try to do what I did today. I really appreciate all the help. — hcker2000, Aug 06 '12 at 19:41

jQuery Mobile Switch to "page" thats already in dom with .changePage()

1 Answers1