{"id":68,"date":"2023-08-25T17:34:47","date_gmt":"2023-08-25T17:34:47","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=68"},"modified":"2023-08-25T17:34:47","modified_gmt":"2023-08-25T17:34:47","slug":"jQuery.mobile.navigate","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/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&apos;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\t<p id=\"low-level\" class=\"warning\"><strong>Note:<\/strong> 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 <a href=\"\/1.4\/pagecontainer\/\">pagecontainer<\/a> methods to navigate to another page.<\/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<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\">&quot;#foo&quot;<\/span>, { <span class=\"hljs-attr\">info<\/span>: <span class=\"hljs-string\">&quot;info about the #foo hash&quot;<\/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\">&quot;#bar&quot;<\/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\">&quot;navigate&quot;<\/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; &quot;info about the #foo hash&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; &quot;back&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; &quot;http:\/\/example.com\/#bar<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ =&gt; &quot;#bar&quot;<\/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<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\">&quot;a&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;click&quot;<\/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&apos;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\">&quot;href&quot;<\/span> ), { <span class=\"hljs-attr\">foo<\/span>: <span class=\"hljs-built_in\">this<\/span>.attr( <span class=\"hljs-string\">&quot;data-foo&quot;<\/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\">&quot;href&quot;<\/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":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-68","post","type-post","status-publish","format-standard","hentry","category-methods"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/68\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}