Using jQuery Mobile linking to external pages
Linking pages
These examples were developed with jQuery Mobile 1.3.2. Last time I checked we were up to v1.4.3. Many things have changed since 1.3.2, so proceed with caution...jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages as you normally would using the <a href="link.html"> syntax, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. However in order to inherit the layout and interaction of the jQuery Mobile framework, the code must adhere to the jQuery Mobile page structure.
This is the minumum code required in a linked page:
<div data-role="page" id="some_id"> <div data-role="content"> Some content </div> </div>
jQuery listeners in external pages
Getting javascript listeners defined outside the linked page to work on the linked page, we have to define the listener carefully. In order to get listeners to work in in external page, we would need to use the pageshow event. The jQuery mobile pageshow event is triggered on the linked page after the transition animation has completed. This is supposed to be replaced by the pagecontainershow event in jQuery Mobile 1.4.0. Example:<script>
// $('#example8_3').live('pageshow', function () { // this worked in version 1 of JQM
// $(document).on("pagecontainershow" , "#example8_3" ,function(){ // this will be the syntax in JQM 1.4
$(document).on("pageshow" , "#example8_3" ,function(){ // this works in JQM 1.2
$(".page3-button").on("click", function() { // add a click listener
alert("You clicked the button")
});
});
</script>
<body>
<div data-role="page" id="example8_1">
<div data-role="header"><center>example8_1.php</center></div>
<div data-role="content">
<ul data-role="listview" class='myList'>
<li data-icon='gear'>
<a href="example8_3.php" id="showMembersID" data-role="button" data-transition="none" data-ajax="true" >
<h1>This button links to a external page.</h1>
<p>The jQuery Mobile framework parses the link's href to formulate an Ajax request called <i>Hijax</i> in jQuery Mobile vocabulary.
Note that the targetted page has to begin with <i>data-role='page'</i> and follows jQuery Mobile page structure</p>
</a>
</li>
<li data-icon='gear'>
<a href="example8_2.php" id="showMembersID" data-role="button" >
<h1>This links to a regular HTML page</h1>
<p>This links to a regular HTML page. Note that the linked page does not follow jQuery Mobile page structure,
and wiil show up blank</p>
</a>
</li>
<li data-icon='gear'>
<a href="example8.php" data-role="button" data-ajax="false" >
<h1>Back Button</h1>
<p>This button takes us back to calling page. Note that by adding <i>data-ajax="false"</i>,
we can ensure that this page does not get encorporated into the jQuery Mobile framework.</p>
</a>
</li>
</ul>
</div>
<div data-role="footer"><center>footer</center></div>
</div>