CODEWITHSUNDEEP
javascriptjqueryjquery-mobilerefreshdynamic-data
TSNev
TSNev

Reputation: 163

jQuery lose XML data on browser refresh

I've built an app with multiple internal pages such as this:

<div id="states" data-role="page">
  <div data-role="header"> <a href="#" onClick="parent.history.back()" data-icon="back">Back</a>
    <h1>My List</h1>
  </div>
  <!-- /header -->
  <div data-role="content"></div>
  <!-- /content -->
  <div data-role="footer" data-position="fixed" data-id="myfooter">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="gear">Option</a></li>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="search">Search</a></li>
      </ul>
    </div>
    <!-- /navbar --> 
  </div>
  <!-- /footer --> 
</div>
<!-- /page -->

When the page is initialized, I load an XML file and populate the pages dynamically. This works fine. If I refresh the screen on the default internal page, it reloads without an issue. I can go 1 or two pages deep, hit the back button... and that works as well. I am using this code to maintain my hash history (I'm a noob).

$(document).bind( "pagebeforechange", function( e, info ) {
    if ( typeof info.toPage === "string" ) {
        var u = $.mobile.path.parseUrl( info.toPage ),
            re = /^#.../;

        if ( u.hash.search(re) !== -1 ) {
            buildLists( u, info.options );
            e.preventDefault();
        }
    }
});

The problem appears when I go to another page and hit refresh, my data comes back as undefined and all of my data.find(...) calls are void, throwing errors.

Has anyone had this problem? How can I make sure my data is either a) retained or b)reloaded. Is there something I am missing?

I've looked into this code but this isn't as dynamic as I require. All of my listviews are populated via the XML.

Upvotes: 1

Views: 306

Answers (1)

FlavorScape
FlavorScape

Reputation: 14289

You're listening to the wrong event. pagebeforechange is triggered when you change the hash. You want to change it when the hash has changed, as in, when the browser sets it. Listen for 'hashchange.' I'd suggest learning how to do these things without jQuery because libraries just HIDE the actual technology.

If that doesn't work, abandon jQuery (I hate it an never use it and all my sites work on all devices). There's plenty of other ways of doing this. Here's one: http://www.davidpirek.com/blog/on-hash-change-javascript-listener

Upvotes: 1

Related Questions