CODEWITHSUNDEEP
jqueryjquery-mobile
Phil LA
Phil LA

Reputation: 163

Jquery mobile swipe navigation triggers strange

I try to build a workout application where you can swipe right and left to see get to the next exercise ( on your mobile device ). I have done research on Jquery mobile docs and stackoverflow but i just cant figure out where my mistake is. Would be great to get a hint of someone.

Basically the problem is: its working 95% but sometimes my swipe event triggers more often or something. ( but i am aware of bubbling but still cant find the mistake )

as the exercises come from a database i build the data-role="page" with a for loop over the evercises. Here is my code. You can give it a try -> sometimes it swipes to the wrong page

<html>
<body>

 <?php for($i = 2; $i < 6; $i++){ 

$num = $i;
if($i > 2) $prev = 'uebung_'. ($num-1);
else    $prev = ''; 
if ($i < 6) $next = 'uebung_'. ($num+1);
else $next = '';

?>   
 <div id="uebung_<?php echo $i;?>" data-role="page" class="uebungen_pages" data-dom-cache="true"  data-prev="<?php echo $prev;?>" data-next="<?php echo $next;?>">

 <?php
 // some short Jquery Mobile panel+header
include 'panel.php'; 
include 'header.php';

?>

<div data-role="content" class="ui-content grey_backg">
     <h1>PREV: <?php echo $prev;?></h1>
    <h3> NEXT: <?php echo $next;?> </h3>
    <h3> i: <?php echo $i;?> </h3>
    <h5> awoidh </h5>


    <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
        <!-- prev && back button -->    
    </div>
      </div><!-- /content -->


$( document ).on( "pageinit", "[data-role='page'].uebungen_pages", function() {
    var page = "#" + $( this ).attr( "id" ),

        // Get the filename of the next page that we stored in the data-next attribute
        next = $( this ).jqmData( "next" ),

        // Get the filename of the previous page that we stored in the data-prev attribute
        prev = $( this ).jqmData( "prev" );

    // Check if we did set the data-next attribute
    if ( next ) {

        // Prefetch the next page
        $.mobile.loadPage( "#"+next);

        // Navigate to next page on swipe left
        $( document ).on( "swipeleft", page, function() {

            $.mobile.changePage( "#"+next, { transition: "slide" });
        });
        /*
        // Navigate to next page when the "next" button is clicked
        $( ".control .next", page ).on( "click", function() {
            $.mobile.changePage( next + ".html", { transition: "slide" } );
        });
        */
    }

 // Disable the "next" button if there is no next page
else {
        $( ".control .next", page ).addClass( "ui-disabled" );
    }
    // The same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
    if ( prev ) {
        $( document ).on( "swiperight", page, function() {

            $.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
        });
        $( ".control .prev", page ).on( "click", function() {
            $.mobile.changePage(  '#'+prev , { transition: "slide", reverse: true } );
        });
    }
    else {
        $( ".control .prev", page ).addClass( "ui-disabled" );
    }
});


 <?php } //end for $I?>

Upvotes: 3

Views: 369

Answers (1)

Gajotres
Gajotres

Reputation: 57309

This is just a theory because you didn't post your whole pages but I would guess you have a problem with multiple event binding. Because of this page swiping is triggering more then once.

To fix this possible problem you will need to fix all your on function bindings (except page event binding like pageinit, pageshow).

What you need to do is change this:

$( document ).on( "swiperight", page, function() {
    $.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
});

to this:

$( document ).off("swiperight", page).on("swiperight", page, function() {
    $.mobile.changePage( '#'+prev, { transition: "slide", reverse: true } );
});

Do it on every on binding. This is problem usually characteristic only to jQuery Mobile.

Take a look here at my own example of page swiping: http://jsfiddle.net/Gajotres/JB22E/

Upvotes: 2

Related Questions