jQuery mobile multiple HTML files

Question

This is quite annoying, but I am building a jQuery mobile site. But if I have a page called about, I want this in a file called about.html. I did manage to get this to work, but all of a sudden I can't get a link to open a separate page. I have tried all sorts of things and now I get a white page.

Here is the test code I have been 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 to link to, 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 this all did work fine, the JavaScript code ran, etc. Then I have changed something. I am not sure what, but I've broken it and for the life of me I can't see it. The whole idea of all pages within one page seems so stupid and sensless.

Tim Niblett · Accepted Answer · 2011-05-24 08:36:02Z

4

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

You second page (about.html) can be a complete HTML page, as long as it contains the current text in the body. jQuery Mobile works just fine that way as it will load the whole file and then extract the page div. You can think of the multiple pages in one as a way of caching stuff in the DOM if that seems more sensible!

answered May 24, 2011 at 8:36

Tim Niblett

1,1877 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chad Ferguson · Accepted Answer · 2012-07-26 13:52:05Z

1

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

rel="external"

You can optionally add data-ajax="false"

So that your link looks like:

<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>

edited Jul 26, 2012 at 13:52

Chad Ferguson

3,0875 gold badges38 silver badges42 bronze badges

answered Jul 26, 2012 at 13:40

Siphiwo Dzingwe

811 silver badge3 bronze badges

1 Comment

Morano88 Over a year ago

Why do we need to disable the data-ajax and make it false ? Also, when I used rel, the transition effects disappeared, any clue why ?

tatlar · Accepted Answer · 2011-05-23 18:10:51Z

0

You have to include the code for the 'about' page in the main index page as a separate div. Unless you have a special reason for having more than one page? This will also make your page load faster (keeping everything on the same page).

So index would 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>

Does that make sense?

Also, you are going through the process of loading jQuery, so you should really use jQuery's built-in DOM navigation to update the div contents - it is much much easier! Then you can remove all the onLoad() events etc.

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

answered May 23, 2011 at 18:10

tatlar

3,1762 gold badges30 silver badges41 bronze badges

4 Comments

davethecoder Over a year ago

no if you read my post i already said that i have had it working with separate files, there is no sense in this being in one file not for what i am doing but i will try the additional rel tag and see if that has an effect, but before it just worked, set nid url and data url and boom and flowed then did a few changes around my page and no longer works.

tatlar Over a year ago

You emptied your cache and then retried to load the page, right? If you made a few changes you will need to empty the browser cache first....

davethecoder Over a year ago

yeah done the cache thing, have actually got all the html to show now, just lost the styling and the hook up ???? bizzare as i defo had this running hence the AboutTest() function, that actually populated a separate file once it had loaded, like the manual says, it should load all the pages using ajax or hijax ??? it has just stopped ?

davethecoder Over a year ago

got it, on the page (about.html) the page div has to have data-url, and a class the link is just a normal link, nothing else, the javascript event is bound to the class a it all works wooop

Collectives™ on Stack Overflow

jQuery mobile multiple HTML files

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related