CODEWITHSUNDEEP
jquerycordovajquery-mobile
Nishant Solanki
Nishant Solanki

Reputation: 2128

Phonegap - Jquery / jquery mobile only working on the first page of app

I have just started with phonegap, I have two pages index.html and pages.html, Index.html page contains owlslider and pages.html has mobile swipeLeft and swiprRight functions.

It works proper in desktop browsers, but when I test it on Android emulator or mobile than only first page jquery is working.

i.e if I put slider page as index than slider is working but when I navigate to swipe Functions page than swipe functionality not working, and if I put swipe page as the index page than swipe works but if I navigate to slider page than It doesnt work.

I am including js files as per html standards

<script src="js/jquery.mobile.min.js"></script>

and including this js in both the pages (i.e index.html and page.html)

Is there any specific way to include js files in phonegap projects? Am I missing something?

I am also using desktop version of phonegap to test, but still the same result.

EDIT

i found something from this answer that states Can't use more then one data-role="page" inside any subsequent HTML page, only initial one can have more then one page., thats why my swipe functions are not working in second page. But how to solve this? How to put swipe in a single page using data-role="page"?? Because I want to change the page header as well.

Upvotes: 0

Views: 560

Answers (2)

justsimpleshh
justsimpleshh

Reputation: 97

I've had this problem for a while but haven't had time to look at it.

This morning on all pages what wouldn't load I moved and JS/JQuery into the Body/data-role="page" div (on that page, not all on the index.html page) and it worked.

So give that a try.

More solutions and a better explanation of above can be found here - Why I have to put all the script to index.html in jquery mobile

Let me know how you get on, if nothing works I'll keep looking for you.

Upvotes: 0

Dibran
Dibran

Reputation: 1545

This behavior is probably caused by your navigation code between index.html and pages.html. Note that jQuery mobile uses page containers for navigation between multiple HTML pages.

The JavaScript should only be added to the index.html and the pages.html should only contain a different HTML layout. Your index.html should look like this:

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
    </head>
    <body>
         <div data-role="page" id="index">
             <div data-role="header">
                 <h1>Login</h1>
             </div>
             <div data-role="main">
                 <!-- Some html content here -->
                 <a href="pages.html">To the pages!</a> 
             </div>
         </div>
    </body>
</html>

Your pages.html should have the same structure only no JavaScript should be added to that HTML file. The pages HTML file should look like this:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div data-role="page" id="pages">
             <!-- Some html content here -->
        </div>
    </body>
</html>

You could also use jQuery mobile JavaScript if you don't have anchors to navigate between pages. That JavaScript is very simple and looks like this:

jQuery.mobile.pageContainer.pagecontainer("change", "menu.html");

Hopefully this helps!

Upvotes: 1

Related Questions