jQuery.mobile.changePage()

Categories: Methods

jQuery.mobile.changePage( to [, options ] )Returns: Undefined

Description: Programmatically change from one page to another.

  • jQuery.mobile.changePage( to [, options ] )

    • to
      Type: String or Object
    • options
      Type: Object
      Properties:
      • allowSamePageTransition (default: false)
        Type: Boolean
        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.
      • changeHash (default: true)
        Type: Boolean
        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.
      • data (default: undefined)
        Type: Object or String
        The data to send with an Ajax page request.
        Used only when the 'to' argument of changePage() is a URL.
      • dataUrl (default: undefined)
        Type: String
        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.
      • pageContainer (default: $.mobile.pageContainer)
        Specifies the element that should contain the page.
      • reloadPage (default: false)
        Type: Boolean
        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.
      • reverse (default: false)
        Type: Boolean
        Decides what direction the transition will run when showing the page.
      • role (default: undefined)
        Type: String
        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.
      • showLoadMsg (default: true)
        Type: Boolean
        Decides whether or not to show the loading message when loading external pages.
      • transition (default: $.mobile.defaultPageTransition)
        Type: String
        The transition to use when showing the page.
      • type (default: "get")
        Type: String
        Specifies the method ("get" or "post") to use when making a page request.
        Used only when the 'to' argument of changePage() is a URL.

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.

Examples:

Example: Transition to the "about us" page with a slideup transition.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!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="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="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>

Demo:

Example: Transition to the "search results" page, using data from a form with an id of "search".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!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="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="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>

Demo:

Example: Transition to the "confirm" page with a "pop" transition without tracking it in history.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!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="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
  </div>
</div>
 
<script>
$.mobile.changePage( "../resources/confirm.html", {
  transition: "pop",
  reverse: false,
  changeHash: false
});
</script>
 
</body>
</html>

Demo: