3

I'm using the code given in this answer to swipe several pages in my Phonegap application.

However, it seems that the live function is deprecated and furthermore, a "0" appears below the page when I try to reload. As I try more, a string of zeroes is created, the number of each telling the number of reloads of that page. Long story short: swiping works but a 0 appears in each load of the swiped page.

I tried to change to this but doesn't seem to work (I'm using Phonegap 2.1.0, jQuery 1.8.2 and jQuery Mobile 1.1.1).

<script type="text/javascript">
    $('div.ui-page').on("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $('div.ui-page').on("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            }, true, true);
        }
    });
</script>

Edit: I tried with this and the same as the initial problem happens:

<script type="text/javascript">
    $(document).delegate('div.ui-page', 'swipeleft', function () {
        var nextpage = $(this).nexy('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $(document).delegate('div.ui-page', 'swiperight', function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
</script>
Community
  • 1
  • 1
jontxu
  • 49
  • 2
  • 6

2 Answers2

1

That version of on is equivalent to bind. To replace live you need 

$(document).on("swipeleft", "div.ui-page", function...

To further debug the event, check what $(this) refers to - it may not be the page you think it is, and may not have a next / previous element.

It depends a certain amount on how your app is set up, but in general you can't rely on the page divs existing in any particular order.

Also, the call to changePage doesn't appear to match the current documentation ( http://jquerymobile.com/test/docs/api/methods.html ) - what are the two trues at the end?

Tom Clarkson
  • 16,074
  • 2
  • 43
  • 51
  • Thanks! But the same happens. I mean, it works perfectly, but a 0 appears below the page and is bugging me out. I think it's some other javascript interacting or the ChangePage itself. – jontxu Nov 16 '12 at 12:40
  • There's nothing in the code you posted that would write a zero anywhere, though a broken call to changePage could trigger a reload. – Tom Clarkson Nov 16 '12 at 12:43
  • Yeah. It's the index of the app and I think the problem might be in the lack of a pageShow or pageCreate listener. I'll give it a try later, after class. Thanks anyway. – jontxu Nov 16 '12 at 13:23
  • I think that it's as you said, there is a broken call to changePage that triggers a reload. But I don't kwow why either. – jontxu Nov 17 '12 at 16:44
1

I don't know if answering my own question is of good etiquetter, but i found the solution and I think it'd be handy being visible.

I updated to jQuery 1.8.2 and jQuery mobile 1.2.0 and everything worked. An example that works is here:

<!DOCTYPE HTML>
<html>
<head>
    <title>EventApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" />

    <script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $('div.ui-page').live("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            });
        }
    });
    $('div.ui-page').live("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            });
        }
    });
    });
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page one</h2>
    </div>
    <div data-role="content">
        You are in page one.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page two</h2>
    </div>
    <div data-role="content">
        You are in page two.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page three</h2>
    </div>
    <div data-role="content">
        You are in page three.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">The map</h2>
    </div>
    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
</body>

And if you want the JsFiddle is here

jontxu
  • 49
  • 2
  • 6