jQuery.mobile.loadPage()

Categories: Methods

jQuery.mobile.loadPage( url [, options ] )Returns: Promise

Description: Load an external page, enhance its content, and insert it into the DOM.

  • jQuery.mobile.loadPage( url [, options ] )

    • url
      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.
      • data (default: undefined)
        Type: Object or String
        The data to send with an Ajax page request.
      • loadMsgDelay (default: 50)
        Type: Number
        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.
      • 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.
      • 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.

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.

Examples:

Example: Load the "about us" page into the DOM.

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.loadPage 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="header">
      <h1>loadPage() demo</h1>
    </div><!-- /header -->
 
  <div data-role="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>

Demo:

Example: Load a "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
 
<!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="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>
    <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>

Demo: