CODEWITHSUNDEEP
javascripthtmljquery-mobiledomjquery-mobile-ajax
Andrew Phillips
Andrew Phillips

Reputation: 664

How to load all JqueryMobile internal pages properly after linking from 1st HTML file to 2nd?

I'm having trouble with a simple Jquerymobile navigation setup.

I have 3 HTML/PHP files that each contain a multiple Jquerymobile pages. I have created simple code as shown below - each file has the same code (except for the list view links).

When I load file1.php I can use the navigation bar to switch from Page 1 to Page 2. When I click a link to file2.php it loads on Page 1 (i.e. file1.php#Page1. However, when I try to navigate to Page 2, it loads file1.php#Page2 instead of file2.php#Page1 ..

I presume I have done something wrong regarding loading the page properly into the DOM - but I'm not sure how to fix it - any help would be greatly appreciated.

(note header.php just includes all necessary cs and javascript for jquerymobile)

<?php 
require_once("header.php");
?>
<body>

    <!-- This is the first page -->
    <div id="page1" data-role="page">
        <header data-role="header">
            <h1>Page1</h1>
        </header>
        <div data-role="navbar">
             <ul>
                <li><a href="#page1" data-transition="slide" class="ui-btn-b">Page1</a></li>
                <li><a href="#page2">Page2</a></li>
            </ul><br>
        </div>
          <ul>
            <li><a href="file1.php">Link to first HTML page</a></li>
            <li><a href="file3.php">Link to third HTML page</a></li>
          </ul>
    </div>

    <!-- This is the second page -->
    <div id="page2" data-role="page">
        <header data-role="header">
            <h1>Page2</h1>
        </header>
        <div data-role="navbar">
             <ul>
                <li><a href="#page1">Page1</a></li>
                <li><a href="#page2" data-transition="slide" class="ui-btn-b">Page2</a></li>
            </ul><br>
        </div>
          <ul>
            <li><a href="file1.php">Link to first HTML page</a></li>
            <li><a href="file3.php">Link to third HTML page</a></li>
          </ul>
    </div>

</body>
</html>

Upvotes: 0

Views: 177

Answers (0)

Related Questions