jQuery mobile Multi Page Internal

Question

I've had a search, all references to multi page that might come close to helping me are years old and an ancient version of jqm.

For clarification: Internal page is a page hosted in a separate file but on the same server, in the same directory as my index.html. An external page would be hosted in a separate file on a different server/domain.

My goal: I have an app which as a single document multi-page which appears fat. It has about 20 pages (with the div-data-role=page). I thought of placing most of these pages into internal pages (thus separate files hosted at the same location as the main index.html page).

This piece guides me...

http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this is done automatically by jQuery Mobile.

If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.

So... Perhaps I have misunderstood having internal pages within jqm - I am getting a page refresh when I expected my page to be loaded via ajax.

I have two pages, an index.html page which has an anchor to m1.html. I would expect that when I am viewing index.html and I click on m1.html, that the URL would magically pull the contents of my div-data-role=page into my index.html DOM and give me a URL similar to index.html#m1

Instead, when I click on the m1 link, I am getting a page refresh and the URL changes to m1.html

Can someone clarify my (mis)understanding?

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" />

    <link href="/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/> 
    <link href="/css/jquery.mobile.icons.min.css" rel="stylesheet" type="text/css"/>

    <script src="/jq/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/jq/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>

    <title>My App</title>
</head>
<body>
<form>
    <div data-role="page" id="Menu">
        <div data-role="header" data-position="fixed" class="ui-title center">
            Main PAGE
        </div>
        <div id="MainContent">
            <ul data-role="listview">
                <li><a href="m1.html">m1</a></li>
            </ul>
        </div>
    </div>
</form>
</body>
</html>

m1.html

<div data-role="page" id="m1">
    <div data-role="header" data-position="fixed" class="ui-title center"> ONE
    </div>
    <div id="MainContent">
        <h1>one</h1>
        <ul data-role="listview">
            <li><a href="#Menu">Menu</a></li>
        </ul>
    </div>
</div>

ezanker ezanker · Accepted Answer · 2016-09-14T13:39:28

Remove the rel="external" on the link. That tells jQM to NOT use AJAX when loading pages.

See more info here: http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.

jQuery mobile Multi Page Internal

1 Answers