0

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.

Community
  • 1
  • 1
Nishant Solanki
  • 2,119
  • 3
  • 19
  • 32

2 Answers2

1

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!

Dibran
  • 1,435
  • 16
  • 24
  • let me give it a try.. will get back to you..thanks for the answer.. :) – Nishant Solanki Jun 22 '15 at 09:04
  • I did some RND and get to know that you have to include all js/css if you use multiple html pages, if you are using a single page than you have to include them once.. check this out http://www.gajotres.net/multipage-template-vs-multi-html-template-in-jquery-mobile/ and this http://thehungrycoder.com/javascript-2/jquery/jquery-mobile/jquery-mobile-part-2-making-multiple-pages-and-linking-them.html – Nishant Solanki Jun 22 '15 at 09:24
0

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.

Community
  • 1
  • 1
justsimpleshh
  • 97
  • 1
  • 10
  • thanks for the answer.. But the problem was I was using more than one `date-role='page'` in child html pages., so it is not allowed.. Now the problem is that I want to create a swipe page slider which changes the header and footer as well but by using a single html page.. – Nishant Solanki Jun 22 '15 at 13:06