Multiple Pages in jQuery Mobile - AJAX

Continuing on from our previous post

In previous article we saw how you can logically divide jQuery mobile app to have multiple pages with all code located in a single html file. Today we will see as how to divide those logical pages into their own html file and still get the jQuery effects working.

 

In order to separate pages into multiple html files all you need is take page 2 section code from previous example and paste it in a separate html file then change link code to reference page instead of an anchor. Rest jQuery mobile will take care.

Once you have placed the anchor what jQuery mobile does is, it looks for page section on the linked page and load it in current page DOM using AJAX so your page doesn't actually changes to different html.

Note: if you are testing this page in Chrome browser and getting error like "Error Loading Page" then it means that your Chrome's current settings doesn't allow to load script from local file system. In this case, you can either enable local scripts or test it in Safari. If Safari is not an option for any reason then you will need to load pages in some kind of webserver and then run the app from there.

Page 1 code:

<!doctype html>

<html>

    <head>

        <title>JQM Application</title>

        <link rel="stylesheet" href="res/jquery.mobile.css" />

        <script type="text/javascript" src="res/jquery-1.7.1.js"></script>

        <script type="text/javascript" src="res/jquery.mobile.js"></script>

    </head>

    <body>

        <section id="page1" data-role="page">

            <header data-role="header">

                <h1>JQM Test</h1>

            </header>

            <div class="content" data-role="content">

                <p>First Page</p>

                <p><a href="Index1.html" data-transition="pop" data-role="button">Go to the second page!</a></p>

            </div>

            <footer data-role="footer" data-position="fixed">

                <h1>© Copyrights</h1>

            </footer>

        </section>        

    </body>

</html>

Page 2 Code:

<!doctype html>

<html>

    <head>

        <title>JQM Application Page 2</title>

    </head>

    <body>

        <section id="page2" data-role="page">

            <header data-role="header">

                <h1>Page 2</h1>

            </header>

            <div class="content" data-role="content">

                <p>Second Sample Page</p>

                <p><a href="Index.html" data-transition="pop" data-role="button">Go to the first page!</a></p>

            </div>

            <footer data-role="footer" data-position="fixed">

                <h1>© Copyrights</h1>

            </footer>

        </section>



    </body>

</html>

Tags: , ,

jQuery | jQuery Mobile