CODEWITHSUNDEEP
jquery-mobilejquery-events
Tiquelou
Tiquelou

Reputation: 459

jQuery mobile: "swipeleft" and "swiperight" work only once

I have a page in which swiping to the left will bring up the next page (different url) and on the next page, swiping to the right will bring the previous page back. The code works beautifully the first time. However, it doesn't work the next time around! If I manually refresh the page, it starts working again... so it must be an initialization problem.

I'm sure some of you must have faced this problem at some point. For those who have, I want to ask you - what is the correct way to implement such a feature?

Upvotes: 3

Views: 10002

Answers (1)

Tiquelou
Tiquelou

Reputation: 459

This is what I finally used:

$(document).bind("pageinit", function(event) {
    var count = 1;
    var nextPage;
    var prevPage;

    //build 1st page of results
    nextPage = "page-"+count+".html";
    $("#showList").load(nextPage,function(){
        $('#showList').trigger('create');
    });

    //detect swipeleft
    $("#showList").bind("swipeleft",function(event) {
        //verify if there is next page
        if(count < 3) {
            // go to next page
            count++;
            nextPage = "page-"+count+".html";
            $("#showList").load(nextPage,function(){
                alert(nextPage+" loaded");
                $('#resultList').trigger('create');
            });
        } else {
            //else notify user he has reached end of results
            alert("Reached end of results");
        }
    });
    //detect swiperight
    $("#showList").bind("swiperight",function(event) {
        //verify it's not 1st page
        if(count > 1) {
            count--;
            prevPage = "page-"+count+".html";
            //go to previous results page
            $("#showList").load(prevPage,function(){
                alert(prevPage+" loaded");
                $('#showList').trigger('create');
            });
        } else {
            //else notify user he's on 1st page
            alert("You are on the 1st page");
        }
    });
});

Which essentially uses the 2 swipe events - swipeleft and swiperight - to update only the part of the list where the individual items appear, i.e. between <ul id ="showList"> and </ul>. The swipes work everytime now.

Part of the solution was derived from here: http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/

This suits my implementation but the flipside is that the URL remains the same through the pages.

I am still open to any other solution.

Upvotes: 5

Related Questions