4

Here is the scenario:

(fyi, in the following, when I say 'window.location=...' it is triggered by a button tap)

I have three pages: 1.html, 2.html, 3.html. I navigate following way:

1.html --- window.location="2.html" ---> 2.html

2.html --- <a href="3.html" /> ---> 3.html

        click Back button

2.html --- window.location="1.html" --> 1.html

In last step 1.html loads but then contents of 2.html are loaded inside the DOM replacing contents of 1.html so I'm on 1.html but see contents of 2.html.

What is happening? Why does jQuery mobile think that it has to load contents of 2.html?

I'm pretty sure it has to do with history and Back button. If I just navigate between 1.html and 2.html without using Back button, it works.

update Here is code http://jsfiddle.net/x6bxN/ To reproduce you'll want to take code from HTML box and separate it into three separate files.

dev.e.loper
  • 35,446
  • 76
  • 161
  • 247
  • Maybe I am not understanding what you are trying to do. Because I cannot reproduce it. I've tried to reproduce what you are describing, but it works fine for me. Here is my sample code. NOTE: This is 3 separate HTML files, I just have them all pasted into the same pastebin page. http://pastebin.com/JkneaERE – Jason Dean Oct 08 '11 at 02:35
  • Could you post a little more code? maybe http://jsfiddle.net as I would like to see how you are navigating between the pages – Phill Pafford Oct 10 '11 at 19:04
  • @PhillPafford Here is a link to jsfiddle http://jsfiddle.net/x6bxN/ I took the html from all three files and inserted them into HTML box. You'd want to put them in three separate files to reproduce. – dev.e.loper Oct 11 '11 at 01:59
  • I'm experiencing the same behavior, but without using window.location at all...this is only on my Android; if I do it in a web browser the display is correct. I've set ajaxEnabled to false but with no effect. – Jordan Reiter Mar 04 '12 at 23:02

4 Answers4

3

What looks to be happening is you're navigating outside the scope of jQM, but 1.html is in location.hash.

Hash changes that occur independently of a click, such as when a user clicks the back button, are handled through the hashchange event, which is bound to the window object using Ben Alman's hashchange special event plugin (included in jQuery Mobile). When a hash change occurs (and also when the first page loads), the hashchange event handler will send the location.hash to the $.mobile.changePage() function, which in turn either loads or reveals the referenced page.

I assume location.hash has the initial 1.html when it loads but doesn't track the new page while using window.location to navigate to a new page. Since you are using the browser back button jQM uses the last tracked location which in your case is 1.html.

I would suggest using jQM's $.mobile.changePage() if you need to track the location. More on jQM Navigation can be found in the docs:

Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • The location.hash is always empty since the url doesn't have # symbol in any of the links. – dev.e.loper Oct 11 '11 at 16:46
  • as soon as you navigate away from 1.html jQM will add this location to urlHistory. I suspect that since you're not using jQM to keep track of hash navigation hitting the back button would find 1.html in urlHistory. You might be able to push your custom navigation onto the location.hash before you transition to the page, this might help with the issue – Phill Pafford Oct 11 '11 at 17:19
  • I'm actually going to try using $.mobile.changePage() method but I need to hook up events correctly. I know that I should be using pageinit instead of ready event, however, I'm a bit confused as in how to hook this event up. I have a different question for that here http://stackoverflow.com/questions/7729729/jquery-mobile-binding-to-pageinit-event – dev.e.loper Oct 11 '11 at 17:26
  • You're correct as I don't see 1.html in the location.hash when loading the page, but I do see it has been added to the urlHistory stack: http://jsfiddle.net/ant2U/20/ – Phill Pafford Oct 11 '11 at 17:34
0

If you want jQuery mobile to handle the history and back button you need to use $.mobile.changePage to change the page (as opposed to window.location=..).

More info here: http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

Porco
  • 4,163
  • 3
  • 22
  • 25
  • I know about jQuery mobile functions to switch pages. I don't want to use them though because it breaks other functionality. Hence I'm using window.location. My confusion why jQuery mobile is trying to 'hijack' my page. It obviously has to do with history and back buttons. – dev.e.loper Oct 07 '11 at 21:26
0

Have you tried to specifically set data-ajax="false" on your links? Or rel="external", although this is supposed to only be used if you want to change to another domain.

If you don't set either one, I'm afraid JQM hijacks.

Try if it works with data-ajax="false".

Actually I have a similar issue with regular JQM-Ajax-links. I want pages to load via Ajax, but if I do like this:

  • go to page1
  • go to page2a
  • go to page2b = reloads page1...

Very annoying and I already filed an issue on Github, but since you don't want to use Ajax you should be ok.

Let me know if it works.

frequent
  • 27,643
  • 59
  • 181
  • 333
0

a wild guess. you didn't hardcode css class ui-page-active into the .ui-page element right? becuase that would cause both page to appear.

Funky Dude
  • 3,867
  • 2
  • 23
  • 33