Question

I’m using Jquery Mobile pagination plugin and trying to work it into a plugin of mine.

Pagination allows to swipe through pages on mobile devices.

My plugin is using a splitscreen, so I’m swiping pages in either one of the panels I’m using. I therefore need to tweak the original plugin to allow:

1. changing panel pages on click/key press = works
2. changing panel pages on swipe left/right = does not work

The problem is on swipe the page is not really changing, so I need to mimic everything that happens during a regular jQuery Mobile changePage.

All works ok except for setting the URL to the page being swiped in.

I can grab the page ID but I cannot set it the URL to it. I think this is helpful using dataURL, but I cannot get it to go.

Any help is greatly appreciated!

Here is the respective code from the modified plugin:

snapTo = function( newOffset, immediate ){
   var $newActive = newOffset === 0 ? $page : newOffset > 0 ? $prevPage : $nextPage,
       samePage = !$newActive || $newActive.is( $page ),
       newUrl = samePage && $page.jqmData( "url" ) || $newActive.jqmData( "url"),
       // so I have the new page and it's url when the page is "swiped in"

       // this fires when the swipe is done
       doneCB = function(){ 

           if( !samePage){
              // checking for panel
              if ( $('html').hasClass( "multiview") ) {
                  // ... stuff
                  // I need to set the URL here without triggering a transition

                  } else {
                  //this is how the plugin does it
                  $page.removeClass( $.mobile.activePageClass )

                  //disable hash listening
                  $.mobile.urlHistory.ignoreNextHashChange = true;

                  // pagination uses this but it triggers a changePage, which I don't want
                  $.mobile.path.set( newUrl );

                  //set "toPage" as activePage
                  $.mobile.activePage = $newActive;
                  ... 
                  }
              }

SOLUTION
Not sure if someone has any use for it but here is the solution anyway:

• you have to call a changePage
• similar to pagination setting ignoreNextHashChange=true, I need to set a similar blocker inside my own plugin to stop hashChanges from triggering an unwanted transition.

Code inside pagination:

var fakeOptions = {};

fakeOptions.transition="none";
// set a blocker! 
$(_pluginTriggerElement_).plugin("option", "$blockPaginationHashChange", true);

// fire a transition
$.mobile.changePage( $newActive, fakeOptions );

This will fire a changePage without transition. My plugin has a routine similar to JQM in that every changePage also triggers a subsequent hashChange. Just like JQM $ignoreNextHashChange option, I define my own $blockPaginationhashChange option and set up a blocker inside my panel Hashchange routine like so:

// block pagination hashChanges
if ( self.options.$blockPaginationHashChange == true ) {
     self.options.$blockPaginationHashChange = false;
     // stop here
     return;
     }

This way no hashChange reverse transitions fire when pages are being swiped. Very blinky but it works.

Answer 1

I’m not familiar with the plugin you’re using but if you post a link to your site I can probably help a bit more.

That being said, jQuery Mobile exposes the $.mobile.changePage() function to make changing pages easy.

$(document).delegate('[data-role="page"]', 'swipeleft swiperight', function (event) {
    event.preventDefault();
    if (event.type == 'swipeleft') {
       $.mobile.changePage(<URL-BASED-ON-SWIPELEFT>, {<options>});
    } else {
       $.mobile.changePage(<URL-BASED-ON-SWIPERIGHT>, {<options>});
    }
});

Note that <URL-BASED-ON-*> can also be an object that is already in the DOM, like $('#some-page-id').

Docs for $.mobile.*: http://jquerymobile.com/demos/1.0/docs/api/methods.html

UPDATE

How about triggering click events on the left/right arrows when a user swipes, this way you can keep the same logic that the Pagination plugin uses:

$(document).bind('swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {

        //swipeleft
        $('.ui-pagination-next').children().trigger('click');
    } else {

        //swiperight
        $('.ui-pagination-prev').children().trigger('click');
    }
});