Programmatically change from one page to another. This method is used internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.
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. This has the effect of creating a new browser history entry. It also means that, if set to false, the incoming page will replace the current page in the browser history, so the page from which the user is navigating away will not be reachable via the browser's "Back" button.
The data to send with an Ajax page request.
Used only when the 'to' argument of changePage() is a URL.
The URL to use when updating the browser location upon changePage completion. If not specified, the value of the data-url attribute of the page element is used.
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.
Decides what direction the transition will run when showing the page.
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.
Transition to the "about us" page with a slideup transition.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.changePage 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="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
</div>
</div>
<script>
//Adding the changeHash: false to avoid an issue with the iframe
$.mobile.changePage( "../resources/us.html", { transition: "slideup", changeHash: false });
</script>
</body>
</html>
Transition to the "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.changePage 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="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<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" />
</p>
</form>
</div>
</div>
<script>
$.mobile.changePage( "../resources/results.php", {
type: "post",
data: $( "form#search" ).serialize(),
changeHash: false
});
</script>
</body>
</html>
Transition to the "confirm" page with a "pop" transition without tracking it in history.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.changePage 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="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
</div>
</div>
<script>
$.mobile.changePage( "../resources/confirm.html", {
transition: "pop",
reverse: false,
changeHash: false
});
</script>
</body>
</html>
Please login to continue.