Methods

jQuery Mobile exposes a suite of methods that are helpful when you need to programmatically update your Mobile Web application.

• $.mobile.changePage()The changePage function handles all the details of transitioning from one page to another.Usage$.mobile.changePage( toPage, [options] )Arguments
  • toPage (sting or jQuery collection). The page to transition to.
  • toPage (string). A file URL (“contact.html”) or internal element’s ID (“#contact”).
  • toPage (object). A jQuery collection object containing a page element as its first argument: $(“#contactPage”)
  options (object). A set of key/value pairs that configure the changePage request. All settings are optional.
  • allowSamePageTransition (boolean, default: false). The changePage method will ignore requests that transition to the same page. Set this option to true to allow same page transitions.
  • changeHash (boolean, default: true). Update the hash to the toPage’s URL when the page change is complete.
  • data (string or object, default: undefined). The data to send to an Ajax page request.
  • dataUrl (string, default: toPage URL). Sets the URL to show in the browser’s location field.
  • fromHashChange (boolean, default: false). To indicate if the changePage came from a hashchange event.
  • fromPage (string, default: $.mobile.activePage). Specifies the from page.
  • pageContainer (jQuery collection, default: $.mobile.pageContainer). Specifies the element that should contain the page after it is loaded.
  • reloadPage (boolean, default: false). Force a reload of the page even if it is already in the DOM of the page container.
  • reverse (boolean, default: false). To indicate if the transition should go forward or reverse. The default transition is forward.
  • role (string, default: “page”). The data-role value to be used when displaying the page. For dialogs use “dialog”.
  • showLoadMsg (boolean, default: true). Display the loading message when a page is requested.
  • transition (string, default: $.mobile.defaultTransition). The transition to apply for the change page. The default transition is slide.
  • type (string, default: “get”). Specifies the method (“get” or “post”) to use when making a page request.
  Example #1://Transition to the "contact.html" page.
$.mobile.changePage( "contact.html" );

<!-- Markup equivalent when link clicked -->
<a href="contact.html">Contact Us</a>Example #2:// Transition to the internal "#contact" page with a reverse "pop" transition.
$.mobile.changePage( ”#contact”, { transition: "pop", reverse: true } );

<!-- Markup equivalent when link clicked -->
<a href="contact.html" data-transition="pop" data-direction="reverse">Contact</a>Example #3:/* Dynamically create a new page and open it */

// Create page markup
var newPage = $("<div data-role=page data-url=hi><div data-role=header>
    <h1>Hi</h1></div><div data-role=content>Hello Again!</div></div>");

// Add page to page container
newPage.appendTo( $.mobile.pageContainer );

// Enhance and open new page
$.mobile.changePage( newPage );
• $.mobile.hidePageLoadingMsg()Remove or hide the page loading message ($.mobile.loadingMessage). The default loading message is “loading” and this is configurable as well. To show the loading message, see $.mobile.showPageLoadingMsg().Example:// Remove the loading message
$.mobile.hidePageLoadingMsg();
• $.mobile.loadPage()The loadPage function loads a page into the DOM of the current page and enhances it. This method is also exposed as a data attribute and can be attached to links or buttons (see “data-prefetch”, in Data Attributes Section).Usage$.mobile.loadPage( url, [options] )Argumentsurl (sting). The page to load.
  • url (string). A file URL (“contact.html”).
  options (object). A set of key/value pairs that configure the changePage request. All settings are optional.
  • data (string or object, default: undefined). The data to send to an Ajax page request.
  • loadMsgDelay (number (in ms), default: 50). Add a manual delay before the loading message is shown. This delay allows the framework to load a cached page without a loading message.
  • PageContainer (jQuery Collection, default:
    $.mobile.pageContainer). The element that should contain the page after it is loaded.
  • reloadPage (boolean, default: false). Force a reload of the page even if it is already in the DOM of the page container.
  • role (string, default: @data-role attribute). The data-role to load the page with. The default is the @data-role attribute defined on the element.
  • showLoadMsg (boolean, default: true). Display the loading message when a page is requested.
  • type (string, default: “get”). Specifies the method (“get" or "post") to use when making a page request.
  Examples:// Dynamically load a page and transition to it.
$.mobile.loadPage("page1.html" );

$.mobile.changePage("#page1" ); // data-url value
• $.mobile.showPageLoadingMsg()Show the page loading message ($.mobile.loadingMessage).Example:// Show the page loading message
$.mobile.showPageLoadingMsg();
• $.mobile.silentScroll(number)Scrolls the page vertically. Within the framework, silentScroll is called whenever a page gets restored. For example, when you click on the back button the silentScroll method gets triggered before the prior page is shown and will restore the prior page’s scroll position. Focus will be on the component that triggered the initial transition. The scrollstart and scrollstop events will not get triggered during a silentScroll.Example:// Hide the iOS address bar
$.mobile.silentScroll(0);

// Scroll down 400 pixels
$.mobile.silentScroll(400);
• $.jqmData()This is the mobile version of the jQuery .data() method. ¹ This method provides all functionality found within $.data() plus it ensures all data is set and retrieved using jQuery Mobile’s data namespace ($.mobile.ns).Examples:// Find all pages (data-role="page") in the DOM via a selector.
var $pages = $( ":jqmData(role='page')" );

// Find the theme (data-theme) for the first page
var firstPage = $pages.first();
var theme = $.jqmData( firstPage, "theme" );
• $.jqmHasData()This is the mobile version of the jQuery .hasData() method. ² This method provides all functionality found within $.hasData() plus it ensures all data is retrieved using jQuery Mobile’s data namespace ($.mobile.ns).Examples:// Does a theme exist for the first page
var hasTheme = $.jqmHasData( firstPage, "theme" );
• $.jqmRemoveData()This is the mobile version of the jQuery .removeData() method.³This method provides all functionality found within $.removeData() plus it ensures all data is removed using jQuery Mobile’s data namespace ($.mobile.ns).Examples:// Set data on the first page
$.jqmData(firstPage, "testData", "testValue");

// Remove the data from the first page
$.jqmRemoveData( firstPage, "testData" );