jQuery Mobile Back Button Fluke Error on iPhone/Android

JavaScript
1

Ive made a nice website using Jquery Mobile but I have stumbled on a bug in my site.

When i click on a page and press the back button on my android phone, the main content area that is loaded into the main page disappears. Its very weird. I can see the content initially after i hit the back button but then it just vanishes.

My question is, would there be a way to attach a javascript event to the back button on the iphone/android phones OR some other method to refresh the page OR some method to reload what was once loaded on the homepage? I guess there are a few ways to solve the error.

Has anyone else seen this problem before? I’m using an older version of jquery mobile so maybe this problem has been addressed in newer version. I’m using jQuery Mobile v1.0a4.1 with jQuery v1.6.1. My first course of action is updating jquery to v1.7.2 and then update jquery mobile to the latest version too. I wanted to get my question out there in case there is nothing that can be done.

2

Do you have a link to the site? I’d like to take a look and see the bug.

3

Unfortunately, when the user navigates backwards they are going to a cached version of the page…it’s not a bug, it’s done by design. This allows browsers to load pages almost instantaneously.

Here’s the problem, because the browser is loading the page from a cache the page is technically never “loaded” and set to “ready”…ie, the jQuery $(document).ready() event is never fired. You can see this by typing console.log(1); immediately inside the event. It’ll never fire.

I’m actually working on a work around for my own project. There are two things I’ve done that work so far:

  1. Don’t use $(document).ready(). As long as the script is at the bottom of the page, all the elements should be there for you to access anyways…not to mention you are building elements with jQuery so it’s not a biggie.
  2. Refresh the page manually with window.location.reload or something

[EDIT]
Another workaround I haven’t tried is to check the hash of the url with javascript
Assuming you have a single page application that loads different content based on the hash, you could poll the hash, if it changes, refresh the page. This is ugly…really ugly, but it would work. Something like this:

var hash = location.hash;

setInterval(function()
{
    if (location.hash != hash)
    {
        console.log("URL HAS CHANGED!");
        hash = location.hash;
    }
}, 100);
4

what if i did’t use document.ready at all? I use $(‘#container’).live(‘pageshow’,function(event, ui){ // my script in here }); on every page and i place this javascript code within the main div of the page so it loads when the pages loads. I also give each div a unique name so there is no overlap.

I did upgrade to the latest version of jquery mobile, this seems to have fixed the back button issue i saw before, but now other things are broken. I’m going to test my site after i completely replace the old version of jquery mobile and I’ll report back.

Thanks for your help!

I think what the problem was that the css file wasn’t getting loaded again because that stuff is up in the head part of my document. My homepage doesn’t seem load anything into div with jquery either which is what i thought was the problem was initially. My menu is hard coded into the page.

So its just weird that everything after the menu moves up above the main content stuff. Probably was an old bug in a previous version and now they have it functioning differently.