jQuery Mobile navigate - Why is the state empty?
ajax, browser-history, javascript, jquery, jquery-mobile
Solution
`$.mobile.navigate` and `navigate` event, are used to track URL history and pass/fetch data from URL. They work with browser's navigation (back / forward).
To pass data between pages dynamically within a webapp using internal navigation, use `$.mobile.changePage`.
Resources:
- $.mobile.navigate()
- Navigate
- $.mobile.changePage()
Use the below code to pass data from page to another.
$.mobile.changePage('store.html', {
dataUrl: "store.html?id=123",
data: {
'id': '123'
},
reloadPage: true // force page to reload
});
To retrieve data
$('.selector').on('pagebeforeshow', function () {
var values = $(this).data("url").split("?")[1];
id = values.replace("id=", "");
console.log(id);
});
Problem
I'm using `$.mobile.navigate("#test-page", {id:123})` to navigate to a secondary page. The navigation from page to page works fine.... but the state is empty! The docs clearly show that the state should contain all information I need when the navigation is performed. This is the code I'm using: ``` $(window).on('navigate', function(event, data) { console.log("navigated", data); console.log(data.state.info); console.log(data.state.direction); console.log(data.state.url); console.log(data.state.hash); if (data.state.hash === "test-page") { console.log("Test page", data.state.id); } }); ``` Unfortunately data is passed as empty: ``` { state:{} } ``` The HTML is the following: ``` <div id="test-home" data-role="page"> <div data-role="header"> <h1>Test Home</h1> </div> <div data-role="content"> <div id="test-btn"> Click DIV for TEST page </div> </div> <div data-role="footer"> </div> </div> <div id="test-page" data-role="page"> <div data-role="header"> <h1>Test Page</h1> </div> <div data-role="content"> Test page </div> </div> ``` Hope that someone can help. Thanks!