CODEWITHSUNDEEP
jquerycordovajquery-mobile
TheTechy
TheTechy

Reputation: 172

jQuery mobile / phonegap not capturing swipe on second html page

** Thought I would post an update.

Apparently JQM can't handle pages in the way I was trying. So the page structure I wanted was this:

"index.html" | |-- Sub page 1 |-- Sub page 2 |-- Sub page 3 etc

"page2.html" | |-- Sub page 1 |-- Sub page 2 |-- Sub page 3 etc

and to use swipeleft or right to navigate between pages! Individual pages are fine but as soon as I go from "index.html" to "page2.html" mobile.changepage can't handle that and so "bugs" creep in.

**

I am trying to develop a jquery mobile (phonegap) app that utilises the swipe features and I am missing something here and I am sure that it will be a facepalm moment but I just cant get my head around this.

As I understand it, the way jqm works (best when calling pages with ajax) I need to load all the code for my site into the index.html file! That I have done. I then need to call $(document).on('pageinit', '#swipehome', function() for example to execute code at document load, init etc. But I can't seem to understand why I can't pickup events on the second page. I have two pages (will be more but 2 for testing this process) index.html & swipe.html

index.html has all the links to the *.js & *.css. It calls swipe.html from a function slidepage

Now the crux of the problem, why aren't the swipe events on swipe.html being picked up?

As I understood it, with ajax page loading if you put js in the index.html page it links across and you can utilise that in the second page?

I have created a simple jsf to show what I need!

http://jsfiddle.net/bFM7B/

Basically I want the functionality in swipe.html page that has been linked from index.html

Any help appreciated!

George

Here's all the code!

** UPDATE TO main.JS ** I am now capturing the swipe event in the second page with the updated code below, BUT the page isn't changing!!! "main.js"

/* === UPDATED CODE === */
$(document).on('swipe', '#swipehome', function() {
    console.log('Changing to #swipepage1');
    $.mobile.changePage('#swipepage1','slide',false,true);
    console.log('End');
});


    //Initialise the slider on the swipe page
$(document).on('pageinit', '#swipehome', function() {   
    $("#home").swiperight(function() {
        $.mobile.changePage("#page1",{ transition: "slide" , reverse: true});
    });

    $("#home").swipeleft(function() {
        $.mobile.changePage("#page2",{ transition: "slide"});
    });

    $("#page1,#page2").swipe(function() {
        $.mobile.changePage("#swipehome", { transition: "fade"});
    });
});

//Initialise the slider on the test page
$(document).on('pageinit', '#testg', function() {   
    $('#foobar').bxSlider({
        touchEnabled: true,
        pager: false,
        pagerSelector: false
    });
});

$(document).bind( "mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

function slidePage(page) {
    $.mobile.changePage(page,{'transition': "slide"});
    console.log(page);
}

"index.html"

<!DOCTYPE html>
<html>
<head>
    <title>swipe test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <!-- STYLESHEETS //-->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0-rc.1.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <!-- JavaScripts //-->
    <script src="js/cordova-2.5.0.js"></script>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.bxslider.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="js/jquery.mobile-1.3.0.js"></script>
    <script src="js/database.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
    <div data-role="page" id="start">   
        <div data-role="content">
            <div style="margin: 0 auto;">
                <a href="#" onClick="slidePage('swipe.html');" class="next" data-role="button" data-theme="a" style="width: 150px; margin: 0 auto;">Swipe</a>
            </div>
        </div>
    </div>
</body>
</html>

"swipe.html"

<!DOCTYPE html> 
<html> 
<body>
   <div data-role="page" id="swipehome">
   <div data-role="content">
    <p>Swipe left or right to change pages</p>
  </div>
</div>

<div data-role="page" id="page1">
<div data-role="content">
    <p>You Swiped right<br/>Swipe any direction to go back</p>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="content">
    <p>You Swiped left<br/>Swipe any direction to go back</p>
</div>
</div>
</body>
</html>

Hope this helps!

Upvotes: 0

Views: 1413

Answers (1)

wmfairuz
wmfairuz

Reputation: 1043

You don't need to pull all your javascript in one single js file.

Your problem most probably comes from the fact that at the moment you register your swipe callbacks, only the elements that are in index.html are registered and not the one in swipe.html. You need to re-register your swipe callbacks after the elements in swipe.html are loaded.

Upvotes: 0

Related Questions