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