0

My app has two panels as a master layout, so all the child pages will have those two panels. Now, I want to register swipe event for all my pages in the application so that a user will be able to access those two panel from anywhere. I have created this function here so that I can just call this to register from different places:

function registerSwipeEvents() {
    //panel swipe from left and right for categories, favs.
    $(document).on("swipeleft swiperight", '[data-role=page]', function (e) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel.
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ($.mobile.activePage.jqmData("panel") !== "open") {
            if (e.type === "swipeleft") {
                $(".right-panel").panel("open");
            } else if (e.type === "swiperight") {
                $(".left-panel").panel("open");
            }
        }
    });
}

I have tried calling this function from pageinit (runs script only once), pagebeforeshow and pageshow (always runs) like this:

$('#HomePage').on('pageshow', function () {
    getFavouritesFromClient();

});

But the event doesn't work for all the pages when I go from one page to another for the second time! Maybe I am not using the events properly but the best one that has worked till now for the first round of navigation is pageshow.

KKS
  • 3,600
  • 1
  • 27
  • 54
  • are you using single-file or multi-files? – Omar Jun 12 '13 at 12:38
  • @Omar multiple files but the Homepage id is the main id of my master '[data-role=page]' and all the content that comes in is injected in content. – KKS Jun 12 '13 at 13:11
  • `$(document).on('pageshow', '#HomePage', function () {` will do the trick. Also, go through this answer, it's helpful http://stackoverflow.com/a/15806954/1771795 – Omar Jun 12 '13 at 13:17
  • @Omar I have tried that, even that doesn't work! Also, the vertical top and down scrolling fires swipe event! – KKS Jun 12 '13 at 13:23
  • Do you have both panels in each page? – Omar Jun 12 '13 at 13:58
  • @Omar yes, as it is the master layout, it is being rendered for every child page. – KKS Jun 12 '13 at 15:20
  • where do you have the js, external JS file or inside body? – Omar Jun 12 '13 at 15:56
  • @Omar i only have one script file that I am calling just above the end of body tag in my master layout so it works for all the pages – KKS Jun 12 '13 at 17:17

1 Answers1

0

This code helped register the swipe events across all pages.

The pagecreate event is applied to all the pages (using [data-role=page]). Inside this event, we find the ID of that specific page $(this).attr('id'). Then we register for the swipeleft and swiperight events for that particular page alone using "#"+thisPageId

(I have included a few lines in the code, that helped me figure out - for those who are interested in knowing that) 

//var glbl; // this helped me find the attribute - global variable for accessing via the console
$( document ).on( "pagecreate", "[data-role=page]", function() {
    //console.log($(this)); // uncomment this line to see this DIV
    //glbl = $(debug); //uncomment this line to assign this DIV to global variable "glbl", which you can then access via the console
    var thisPageId = $(this).attr('id');
    $( document ).on( "swipeleft swiperight", "#"+thisPageId, function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#panelRight" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#panelLeft" ).panel( "open" );
            }
        }
        console.log('on swipes');
    });
    console.log('on pagecreate');
});
my account_ram
  • 325
  • 3
  • 11