jQuery Mobile navigate - Why is the state empty?

Question

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!

Answer 1

$.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);
});

Answer 2

I know it is an old question, but @Omar's answer can be improved.

In fact, it is possible to use pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition and pagecontainerchange (they are fired in this order) and inside the handler you can read the property history.state, that at that point is updated with the new state.

So, for example, you can write (to initialize things that need the page already formatted, e.g. Google Maps):

$(document).on("pagecontainershow", function(e, data) {
    console.log("pagecontainershow: " + JSON.stringify(history.state));     
});

This works in all cases: if you click on a link (with a hash, e.g. #user), if you navigate with the back and forward buttons, if you use $.mobile.navigate and also for window.history.back().

Moreover, you can pass complex data, not limited to the query string constraints.

Resources:

• Pagecontainer
• History