Geek Answers Handbook

JQuery for mobile multiple HTML files

This is pretty annoying, but I'm building a jQuery mobile site. But if I have a page called about , I want this in a file called about.html . I managed to get this to work, but suddenly I can’t get the link to open a separate page. I tried all kinds of things and now I get a white page.

Here is the test code I was messing with:

Index

 <!DOCTYPE html> <html> <head> <title>Notification Example</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for PhoneGap to load // function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } // PhoneGap is ready // function onDeviceReady() { // Empty } $('#about').live('pagecreate',function(event){ AboutTest(); }); $('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); }); function AboutTest(){ var element = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device PhoneGap: ' + device.phonegap + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Version: ' + device.version + '<br />'; } </script> </head> <body onload="onLoad()"> <div data-role="page" id="home"> <div data-role="header"><h2>Page 1</h2></div> <div data-role="content"> <a href="about.html" data-url="about.html">testing</a> </div><!-- /content --> <div data-role="footer"><h4>Footer</h4></div> </div><!-- /page --> </body> </html>

Here is my test page for the link, about.html :

  <div data-role="page" id="about" data-title="about"> <div data-role="header"><h1>Page 2</h1></div> <div data-role="content"><p id="deviceProperties">Loading device properties...</p></div> <div data-role="footer"><h4>Footer</h4></div> </div>

Now all this works fine, JavaScript code is running, etc. Then I changed something. I’m not sure, but I broke it and for life I do not see me. The whole idea of ​​all the pages in one page seems so stupid and pointless.

+4
source share
3 answers

It works for me if you remove "data-url='about.html'" from the link in the content. This attribute is for a div page.

The second page (about.html) can be a full HTML page if it contains the current text in the body. jQuery Mobile works just fine, as it downloads the whole file and then retrieves the div page. You can think of multiple pages in one as a way to cache stuff in the DOM, if that seems more reasonable!

+4
source

Your link to the "external page" link must have the following attribute:

 rel="external"

You can optionally add data-ajax="false"

To make your link look like this:

 <a href="about.html" data-url="about.html" rel="external">testing</a>

or

 <a href="about.html" data-url="about.html" rel="external" data-ajax="false">testing</a>
+1
source

You must include the code for the "about" page on the index main page as a separate div. Unless you have a special reason to have more than one page? It will also speed up page loading (keeping everything on one page).

Thus, the index will now have:

 <div data-role="page" id="home"> <div data-role="header"><h2>Page 1</h2></div> <div data-role="content"></div> <div data-role="footer"></div> </div> <div data-role="page" id="about" data-title="about"> <div data-role="header"><h1>Page 2</h1></div> <div data-role="content"><p id="deviceProperties">Loading device properties...</p> </div> <div data-role="footer"><h4>Footer</h4></div> </div>

It makes sense?

Also, you are viewing the jQuery download process, so you really need to use the jQuery built-in DOM navigation to update the contents of the div - it's a lot easier! Then you can remove all onLoad () events, etc.

If you want to load the page on a real external page (as your OP says), you can also add rel = "external" to the 'about' link.

0
source

More articles:


All Articles