Navigation - jQuery Mobile Demos

##

Demos

Menu Search

# Ajax Navigation

The `$.mobile.navigate` method and the `navigate` event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API.

## Introduction

jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.

One of jQuery Mobile's core features is the ability to load and view content from disparate pages into the initial document with support for standard navigation methods like anchors and the back button. To accomplish this the library has progressive support for `hashchange` and `popstate` coupled with internal history tracking which can be used à la carte.

An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with `$.mobile.navigate`. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, `foo` property of the object argument to the navigate method).

    // 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") );
    });

Next, a `navigate` event binding helps in responding to backward and forward navigation via the browsers history API. Here the `alterContent` function can address the direction in which the browser is navigating as well as any additional information stored on the data object when `$.mobile.navigate` was invoked to store the corresponding history entry.

    // Respond to back/forward navigation
    $( window ).on( "navigate", function( event, data ){
    	if ( data.state.foo ) {
    		// Make use of the arbitrary data stored
    	}

    	if ( data.state.direction == "back" ) {
    		// Make use of the directional information
    	}

    	// reset the content based on the url
    	alterContent( data.state.url );
    });

## Event Example

jQuery Mobile provides the `navigate` event as a wrapper for both `hashchange` and `popstate`. That is, where a binding to both events would be required to support browsers with and without `popstate` only one binding to `navigate` is necessary. In this example, altering the hash will trigger the `popstate` or `hashchange` event depending on the browser, but only a single `navigate` binding is necessary. Make sure to use the back button after alterting the hash to see that the event is fired in both cases.

Note: when viewing the console output, some browsers (eg, Chrome) fire a popstate on the initial page load

    // Bind to the navigate event
    $( window ).on( "navigate", function() {
    	console.log( "navigated!" );
    });

    // Bind to the click of the example link
    $( "#event-example" ).click(function( event ) {
    	event.preventDefault();
    	location.hash = "foo";
    });

Event Example

## Method Example

jQuery Mobile provides the `$.mobile.navigate` method as a means to track history and receive additional information along with `navigate` events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the `navigate` event is triggered as in the event example above but along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.

Note: The arbitrary state properties must be chosen carefully to avoid the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.

    // Bind to the click of the example link
    $( "#method-example" ).click(function( event ) {
    	// Append #bar
    	$.mobile.navigate( "#bar", {
    		info: "info about the #bar hash"
    	});

    	// Replace #bar with #baz
    	$.mobile.navigate( "#baz" );

    	// Log the results of 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 );
    	});

    	// Go back to pop the state for #bar and log it
    	window.history.back();
    });

Method Example

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle