Question

I’m having a strange effect when trying to manually set the data-url attribute on a page when going from page1 to page2.

I want to set the page data-url attribute to the URL pathname like so:

 page.attr({ 'data-url' : $.mobile.path.parseUrl( window.location.href ).pathname });

Right now I’m doing this on pagebeforeshow. The problem is, if I don’t wait at least 400ms, the data-url will always be set to the previous page url. So I’m doing this, which I think is really bad…

window.setTimeout(function () {
    page.attr({
        'data-url': $.mobile.path.parseUrl(window.location.href).pathname
    });
}, 400)

Question:
Could this be due to me listening to pagebeforeshow vs. pageshow? How can I make sure without a timeout that a new page being pulled into the DOM does not get the pathname of the previously visited page (which makes for some confusing navigation…

Answer 1

The problem was pushstate hiding what actually happens.

If you go from http://www.site.com/folder/page1.html to page2.html in Jquery Mobile, your none pushstate Url looks like this:

 www.site.com/folder/page1.html/#/folder/page2.html

which pushstate masks into

  www.site.com/folder/page2.html

But if you use parseURl.pathname, the path will still be

  www.site.com/folder/page1.html

So, setting data-url to pathname will always set it to

   www.site.com/folder/page1.html

because that is… the pathname. Pushstate just doesn’t show it. I’m doing this now , which works fine without a timeout:

   setPage = $.mobile.path.parseUrl( window.location.href );
   setPageUrl = setPage.hash == "" ? setPage.pathname : setPage.hash.replace('#','');
   page.attr({ 'data-url' : setPageUrl });