Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Changing Pages
There are times when standard hyperlinks don’t provide the functionality that we are looking for. For example, in a web application that includes a good share of JavaScript, it may be likely that a page change needs to occur from within a JavaScript event rather than from a simple hyperlink within a web page. With jQuery Mobile being based on JavaScript, it is only fitting to include access to a way to change pages using a core method that loads pages the jQuery Mobile way. This method is changePage, and it is the method used internally by jQuery Mobile to change pages. Using this method means direct access to its associated functionality, which includes Ajax page loads, transitions, and many other properties that would not be accessible via a simple hyperlink.
The following example utilizes a few of the properties available to this method by posting form results to a PHP page. The example starts with a simple HTML form, which includes a first name, last name, and email address field. When the form is submitted, jQuery is used to handle the form post by means of the submit event. This event is added to the form in the web page, which has an id of my-form. Within this submit event, the jQuery Mobile changePage method is called. It is directed to the results.php page. The type of request is set to post, and the form results are serialized in order to send them through Ajax to the results.php web page and the dataUrl, which is a portion of the URL in the browser that is updated with a custom string to identify the page change.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Changing Pages</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#my-form').submit(function() {
$.mobile.changePage("results.php", {
type: "post",
data: $("#my-form").serialize(),
dataUrl: "results"
});
return false;
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Page Header</h1></div>
<div data-role="content">
<form id="my-form" action="">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName">
<label for="emailAddress">Email Address:</label>
<input type="text" name="emailAddress" id="emailAddress">
<input type="submit" value="Sign me up">
</form>
</div>
<div data-role="footer">Copyright</div>
</div>
</body>
</html>
The results.php page functions as usual; it can access all the form results via the appropriate HTTP variable, in this case $_POST. This form could have also been sent via get, which would have required results.php to use the $_GET variable in order to retrieve the results. In this example, the results.php page is fairly simple; it includes the typical jQuery code and template, and uses PHP to loop through the post results in order to write the key and value of each to the page.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Changing Pages</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Page Header</h1></div>
<div data-role="content">
<?php
if($_POST) {
foreach($_POST as $key=>$value) {
echo '<p><b>'.$key.'</b>: '.$value.'</p>';
}
}
?>
</div>
<div data-role="footer">Copyright</div>
</div>
</body>
</html>
As you can see, this functionality could prove very powerful if used in the right capacity.
Many more properties are available to the changePage method. The following is a comprehensive list of the properties:
- allowSamePageTransition: This option is set to false by default. Setting this option to true will allow not only the same page to be used as the argument in the changePage method, but it will also execute it. When this option is set to false, the method will not execute a request to the same page.
- changeHash: This option can be used to determine if the hash in the browsers location bar should be updated. The default value for this property is true.
- data: As seen above, this option can be used to send data with an Ajax request.
- dataUrl: The value of this property is undefined by default, but can be set as a URL to update the browser location when the page changes.
- pageContainer: This option can be used to specify in what element the requested page will be contained.
- reloadPage: If a URL is used as the value for the changePage method, the reloadPage property can be used to force the page to reload.
- reverse: This property can be used to change the direction of a page transition.
- role: This option can be used to define the data-role that is associated with the page when it is displayed.
- showLoadMsg: This property can be used to decipher whether or not to show a loading message.
- transition: This option defines the transition that is used when changing pages. All of the previously defined transitions can be used with this option.
- type: The type of request can be set to post or get; get is the default value.
The changePage method is a powerful way to not only handle page changes, but to also handle form submissions. The ways in which you can customize the page change are many, and allow for interesting and unique possibilities through the options that this method has to offer.