CODEWITHSUNDEEP
jqueryjquery-mobile
Dave Taubler
Dave Taubler

Reputation: 1091

jQuery Mobile multi-page template requests wrong page

I've been playing around with jQuery and jQuery mobile for a few weeks. I have a pretty simple example which seems to indicate a pretty nasty jQuery mobile bug, so I wanted to see if there's something I'm doing that's wrong.

What's happening is that I have one page (call it index2.html) which serves as the homepage. I then have a second page (dc2.html) which is where the webapp's main functionality resides. dc2.html is a multi-page template; i.e. it contains two divs that declare data-role="page". As you might guess, within dc2.html I provide links from the first "page" div to the second "page" div, and vice-versa.

If I manually enter the URL for dc2.html directly into my browser, then this interaction works fine. However, if I start on index2.html and follow its link to dc2.html, then I click/tap on the link to load the second 'data-role="page"' div, the browser instead makes a network call to index2.html and loads that again!

In case it matters, the URLs are like www.XXXX.com/software_utilities/mobile/index2.html and www.XXXX.com/software_utilities/mobile/dc2.html, so they are in nested folders, although both are within the same nested folder.

Here's the code (of course stripped down to the essentials to demo this issue) for index2.html:

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>

<!-- Start of first page -->
<div data-role="page">

    <div data-role="header">
            <h1>Utilities</h1>
    </div><!-- /header -->

    <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="d">
                    <li><a href="/software_utilities/mobile/dc2.html">DC</a></li>
            </ul>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

and the code for dc2.html:

<!DOCTYPE html>
<html>
    <head>
    <title>Date Format</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>

<!-- Start of main page -->
<div data-role="page" id="main">
    <div data-role="header">
            <a href="index2.html" data-direction="reverse" data-role="button" data-inline="true">Home</a> <h1>Page One</h1>
    </div><!-- /header -->

    <div data-role="content">
                            <a href="#page_two">Click/tap me to go to page 2</a>
    </div><!-- /main content -->
</div><!-- /main page -->

<div data-role="page" id="page_two">
    <div data-role="header">
            <a href="#main" data-direction="reverse" data-role="button" data-inline="true">Back</a> <h1>Page Two</h1>
    </div><!-- /header -->
</div><!-- /dateformat page -->

</body>

</html>

Any insight would be greatly appreciated; thanks!

Upvotes: 1

Views: 1101

Answers (1)

Jasper
Jasper

Reputation: 75993

I have not tried the flow you are using however I believe when you click the link on index2.html for the page on dc2.html, only the first <div data-role="page"> is being added to the DOM. So when you click on the link for the second pseudo-page in dc2.html, it does not exist in the DOM (i.e. there is no div with the id of "page_two").

Try putting all three pages in one file or splitting them up to all be in separate files. You could also add rel="external" to the link on index2.html which will disable the AJAX navigation (and page transition animation) however the browser would then load both the pseudo-pages on dc2.html.

Upvotes: 3

Related Questions