Load an external page, enhance its content, and insert it into the DOM. This method is called internally by the changePage() function when its first argument is a URL. This function does not affect the current active page so it can be used to load pages in the background. The function returns a deferred promise object that gets resolved after the page has been enhanced and inserted into the document.
Properties:
By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.
Decides if the hash in the location bar should be updated.
The data to send with an Ajax page request.
Forced delay (in ms) before the loading message is shown. This is meant to allow time for a page that has already been visited to be fetched from cache without a loading message.
Specifies the element that should contain the page.
Forces a reload of a page, even if it is already in the DOM of the page container.
Used only when the 'to' argument of changePage() is a URL.
The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.
Decides whether or not to show the loading message when loading external pages.
The transition to use when showing the page.
Specifies the method ("get" or "post") to use when making a page request.
Used only when the 'to' argument of changePage() is a URL.
Load the "about us" page into the DOM.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.loadPage demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>loadPage() demo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>First check if the 'About us' page is in the DOM, Load the page in the DOM and check again</p>
<input type="button" id="domcheck" data-inline="true" value="Is 'About us' in the DOM?"/>
<input type="button" id="loadpage" data-inline="true" value="Load the 'About us' page"/><br />
<div id="myResult">'About Us' is in the DOM: <span id="result">The result will be displayed here</span></div>
</div>
<script>
$( "#domcheck" ).on( "click", function() {
var check = $( "#aboutUs" ).length === 1;
$( "#result" ).text( check );
});
$( "#loadpage" ).on( "click", function() {
$.mobile.loadPage( "../resources/us.html");
});
</script>
</body>
</html>
Load a "search results" page, using data from a form with an id of "search".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.loadPage demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<form id="search">
<p>Please fill in the form below:<br /><br />
<label for="choice">Favorite framework:</label>
<input type="text" name="choice" id="choice" value="jQuery Mobile" />
<a href="#formResults" data-role="button" data-inline="true" data-rel="dialog">Show Results</a>
</p>
</form>
</div>
<script>
$.mobile.loadPage( "../resources/results.php", true, {
type: "post",
data: $( "form#search" ).serialize()
});
</script>
</body>
</html>
Please login to continue.