title: jQuery Mobile navigate - Why is the state empty?
body: <p>I'm using <code>$.mobile.navigate("#test-page", {id:123})</code> to navigate to a secondary page.</p>
  
  <p>The navigation from page to page works fine.... but the state is empty! </p>
  
  <p>The docs clearly show that the state should contain all information I need when the navigation is performed.</p>
  
  <p>This is the code I'm using:</p>
  
  <pre><code>$(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);
    }
  });
  </code></pre>
  
  <p>Unfortunately data is passed as empty:</p>
  
  <pre><code>{
      state:{}
  }
  </code></pre>
  
  <p>The HTML is the following:</p>
  
  <pre><code>&lt;div id="test-home" data-role="page"&gt;
  
        &lt;div data-role="header"&gt;
            &lt;h1&gt;Test Home&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div data-role="content"&gt;
            &lt;div id="test-btn"&gt;
              Click DIV for TEST page
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div data-role="footer"&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  
    &lt;div id="test-page" data-role="page"&gt;
       &lt;div data-role="header"&gt;
            &lt;h1&gt;Test Page&lt;/h1&gt;
       &lt;/div&gt;
  
       &lt;div data-role="content"&gt;
          Test page
  
       &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Hope that someone can help. Thanks!</p>