I have a page1.html that has a link in it like this:
<a href="page2.html">PAGE2</a>
A part page2.html is like this:
<html>
<head>
</head>
<body>
<div data-role="page">
</div>
<script src="file1.js"></script>
<script src="file.js"></script>
</body>
</html>
And also this:
<html>
<head>
</head>
<body>
<div data-role="page">
</div>
<div data-role="page">
<script src="file1.js"></script>
<script src="file.js"></script>
</div>
</body>
</html>
These two js files implement some functionality on page2.html, but when navigating to page2.html via page1.html these two files wont work, but when done with data-ajax="false" it works. What is wrong. Where should the scripts be placed? I need default ajax for smoother transitions.
As per your updated question, you can't mix Single Page Model with Multi-Page Model. When you load page2.html first
data-role="pageand ONLY first one is loaded. Anything else is neglected.
index.html (first page loaded) - All tags within <html> are loaded into DOM whether Ajax is enabled or disabled.
<html>
<head>
<!-- JS, CSS, etc.. -->
</head>
<body>
<!-- pages -->
</body>
</html>
page2.html - All tags are neglected except for FIRST data-role="page" and its' content, when Ajax is enabled.
<!-- libraries in head are neglected -->
<head>
<!-- JS, CSS, etc.. -->
</head>
<body>
<!-- ONLY first page is loaded -->
<div data-role="page">
<!-- JS -->
</div>
<!-- next pages are neglected -->
<div data-role="page">
</div>
</body>
When using Single Page Model and Ajax is enabled, you have to place JS libraries/code for the external page inside <div data-role="page">.
<div data-role="page">
<script src="file1.js"></script>
<script src="file.js"></script>
</div>
jQuery Mobile loads external pages via Ajax, it loads ONLY first <div data-role="page"> in <body and neglects any other tags out side page div.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments