jQuery.mobile.navigate()

Categories: Methods

jQuery.mobile.navigate( url [, data ] )Returns: Undefinedversion added: 1.3

Description: Alter the url and track history. Works for browsers with and without the new history API.

The $.mobile.navigate method provides a uniform history manipulation API for browsers that support the new history API and those that don't (hashchange). It works in concert with the navigate event by storing and retrieving arbitrary data in association with a URL (much like popState and replaceState). When the user returns to a URL set by the navigate method the navigate event is triggered with the associated data.

Note: This method is a low-level utility which can be used on its own. If you use the jQuery Mobile navigation framework, you should not separately use this utility. Instead, you should use pagecontainer methods to navigate to another page.

Examples:

Example: Change the hash fragment twice then log the data provided with the navigate event when the browser moves backward through 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
 
// Starting at http://example.com/
 
// Alter the URL: http://example.com/ => http://example.com/#foo
$.mobile.navigate( "#foo", { info: "info about the #foo hash" });
 
// Alter the URL: http://example.com/#foo => http://example.com/#bar
$.mobile.navigate( "#bar" );
 
// Bind to the navigate event
$( window ).on( "navigate", function( event, data ) {
  console.log( data.state.info );
  console.log( data.state.direction )
  console.log( data.state.url )
  console.log( data.state.hash )
});
 
// Alter the URL: http://example.com/#bar => http://example.com/#foo
window.history.back();
 
// From the `navigate` binding on the window, console output:
// => "info about the #foo hash"
// => "back"
// => "http://example.com/#bar
// => "#bar"

Example: Hijack a link click to use the navigate method and then load content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// Starting at http://example.com/
 
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ) {
 
  // Prevent the usual navigation behavior
  event.preventDefault();
 
  // Alter the url according to the anchor's href attribute, and
  // store the data-foo attribute information with the url
  $.mobile.navigate( this.attr( "href" ), { foo: this.attr( "data-foo" ) });
 
  // Hypothetical content alteration based on the url. E.g, make
  // an ajax request for JSON data and render a template into the page.
  alterContent( this.attr( "href" ) );
});