Geek Answers Handbook

Why should I put all the script in index.html in jQuery mobile

I used $ .mobile.changepage to redirect in my phonegap + jquerymobile projects. However, what confuses me is that I need to put the script of all the pages in a single index.html file. If not, the redirect page cannot execute the function in its header.

for example, my index.html seems to be $(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

then my device will be redirected to test.html, which looks like

 $("#btnTest").click(function(){alert("123");}) <button id="btnTest">Test</button>

However, the script will never be executed in test.html. Then I put the script in index.html, what I expect. No matter if I put all the script on the same page, the project will become harder and harder to save. Thank you for your help.

+23
javascript jquery html jquery-mobile cordova
source share
3 answers

Introduction

This article can also be found HERE as part of my blog.

How jQuery Mobile handles page changes

To understand this situation, you need to understand how jQuery Mobile works. It uses ajax to load other pages.

The first page loads normally. His HEAD and BODY are loaded into the DOM , and they are waiting for other content. When the second page loads, the BODY content is loaded into the DOM . More precisely, even BODY not fully loaded. Only the first div with the data-role = "page" attribute will be loaded, everything else will be discarded. Even if you have more pages inside BODY , only the first will be loaded. This rule applies only to subsequent pages, if you have more pages in the initial HTML , they will all be loaded.

This is why your button displays successfully, but the click event does not work. The same click event whose parent HEAD not taken into account during the page transition.

Here is the official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Unfortunately, you will not find this in your documentation. The ether thinks this is general knowledge, or they forgot to describe it, like my other topics. (The jQuery Mobile documentation is large, but many things are missing.)

Solution 1

On the second page and on every other page, move the SCRIPT tag to BODY , for example:

 <body> <div data-role="page"> // And rest of your HTML content <script> // Your javascript will go here </script> </div> </body>

This is a quick fix, but still ugly.

A working example can be found in my other answer here: Pages do not start after change

Another working example: Page loaded differently with jQuery-mobile transition

Decision 2

Move all your javascript to the original first HTML. Collect everything and put it in one js file in HEAD . Initialize it after loading jQuery Mobile.

 <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="index.js"></script> // Put your code into a new file </head>

In the end, I will explain why this is part of a good solution.

Decision 3

Use rel = "external" in your buttons and each element that you use to change the page. Because of this, ajax will not be used to load the page, and your jQuery Mobile application will behave like a regular web application. Unfortunately, this is not a good solution in your case. Telephony should never work like a regular web application.

 <a href="#second" class="ui-btn-right" rel="external">Next</a>

White papers, find the chapter: Communication without Ajax

Realistic solution

A realistic solution will use Solution 2 . But unlike solution 2, I would use the same index.js file and initialize it inside the HEAD all possible other pages.

Now you can ask me WHY ?

Phonegap , like jQuery Mobile, is buggy, and sooner or later an error will occur, and your application will fail (including the loaded DOM), if your every js content is inside the same HTML file, the DOM can be deleted, and Phonegap refresh your current page. If there is no javascript on this page, this will not work until the restart.

Final words

This problem can be easily fixed with good page architecture. If anyone is interested, I wrote an ARTICLE about the good jQuery Mobile page architecture. In a nut shell, I discuss that knowing how jQuery Mobile works is the most important thing you need to know before you can successfully create your first application.

+57
source share

Unlike regular regular HTML pages, jQuery Mobile uses ajax technology to navigate between pages. Therefore, be sure to import all your JS files and libraries into all your html pages.

If you notice carefully, you will see that the JS files from the previous page are taken into account when loading the second page. But if you press rrefresh the current page, then the js files of the current page will be effective.

So, as I said earlier, be sure to import js files into all html files.

Also no need to call deviceready , use the following syntax to call your page specific js functions

 $(document).on('pageshow', '#YourPageID', function(){ // Your code goes here });
+1
source share

JQuery Mobile uses ajax to load the page. The "page" here is a div with data-role = page. If you are loading the physical index.html page, you can navigate with changePage to any "page" div within that page.

However, if you want to load a “page” from another physical page, jQM will only load the first “page” div from that page. What actually happens is that you are not changing the page, jQM just loads this particular “page” div with ajax and injects it into your current page.

You have two possible architectures where you put all of your “pages” on an html page and navigate from there. Or you may have multi-page architecture. You can always mix it.

To physically change the page, you need to add rel = external via your link.

+1
source share

More articles:


All Articles