{"id":38,"date":"2026-08-10T21:48:02","date_gmt":"2026-08-10T21:48:02","guid":{"rendered":"https:\/\/api.jquerymobile.com\/1.3\/?p=38"},"modified":"2026-08-10T21:48:02","modified_gmt":"2026-08-10T21:48:02","slug":"jQuery.mobile.navigate","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/jQuery.mobile.navigate\/","title":{"rendered":"jQuery.mobile.navigate()"},"content":{"rendered":"<article id=\"jQuery-mobile-navigate1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">jQuery.mobile.navigate( url [, data ] )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Undefined\">Undefined<\/a><\/span><span class=\"version-details\">version added: 1.3<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Alter the url and track history. Works for browsers with and without the new history API.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\"><a id=\"jQuery-mobile-navigate-url-data\" href=\"#jQuery-mobile-navigate-url-data\"><span class=\"icon-link\"><\/span>jQuery.mobile.navigate( url [, data ] )<\/a><\/h4>\n<ul>\n<li id=\"jQuery-mobile-navigate-url-data-url\">\n<div><strong>url<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li id=\"jQuery-mobile-navigate-url-data-data\">\n<div><strong>data<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<p>The <code>$.mobile.navigate<\/code> 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 <code>popState<\/code> and <code>replaceState<\/code>). When the user returns to a URL set by the navigate method the navigate event is triggered with the associated data.<\/p>\n\t<\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Examples:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<h3>\n\t\t\t\tExample 1<\/h3>\n<p>Change the hash fragment twice then log the data provided with the navigate event when the browser moves backward through history.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Starting at http:\/\/example.com\/<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Alter the URL: http:\/\/example.com\/ =&gt; http:\/\/example.com\/#foo<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$.mobile.navigate( <span class=\"hljs-string\">\"#foo\"<\/span>, { <span class=\"hljs-attr\">info<\/span>: <span class=\"hljs-string\">\"info about the #foo hash\"<\/span> });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Alter the URL: http:\/\/example.com\/#foo =&gt; http:\/\/example.com\/#bar<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$.mobile.navigate( <span class=\"hljs-string\">\"#bar\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Bind to the navigate event<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">window<\/span> ).on( <span class=\"hljs-string\">\"navigate\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, data <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">console<\/span>.log( data.state.info );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">console<\/span>.log( data.state.direction )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">console<\/span>.log( data.state.url )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">console<\/span>.log( data.state.hash )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Alter the URL: http:\/\/example.com\/#bar =&gt; http:\/\/example.com\/#foo<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-built_in\">window<\/span>.history.back();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ From the `navigate` binding on the window, console output:<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; \"info about the #foo hash\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; \"back\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; \"http:\/\/example.com\/#bar<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; \"#bar\"<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-1\">\n<h3>\n\t\t\t\tExample 2<\/h3>\n<p>Hijack a link click to use the navigate method and then load content.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Starting at http:\/\/example.com\/<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Define a click binding for all anchors in the page<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"a\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Prevent the usual navigation behavior<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  event.preventDefault();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Alter the url according to the anchor's href attribute, and<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ store the data-foo attribute information with the url<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $.mobile.navigate( <span class=\"hljs-built_in\">this<\/span>.attr( <span class=\"hljs-string\">\"href\"<\/span> ), { <span class=\"hljs-attr\">foo<\/span>: <span class=\"hljs-built_in\">this<\/span>.attr( <span class=\"hljs-string\">\"data-foo\"<\/span> ) });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Hypothetical content alteration based on the url. E.g, make<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ an ajax request for JSON data and render a template into the page.<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  alterContent( <span class=\"hljs-built_in\">this<\/span>.attr( <span class=\"hljs-string\">\"href\"<\/span> ) );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Alter the url and track history. Works for browsers with and without the new history API.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-methods"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/38\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}