Geek Answers Handbook

JQuery mobile loads the page in the DOM, even if I don't ask for it

Here is the scenario:

(fyi, in the next, when I say "window.location = ...", it starts by clicking a button)

I have three pages: 1.html, 2.html, 3.html. I navigate as follows:

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 the last step, 1.html loads , but then the contents of 2.html is loaded inside the DOM, replacing the contents of 1.html, so I'm on 1.html, but I see the contents of 2.html.

What's happening? Why does jQuery mobile think it should load 2.html content?

I am sure this is due to the story and the back button. If I just navigate between 1.html and 2.html without using the back button, this works.

update Here is the code http://jsfiddle.net/x6bxN/ To reproduce, you will want to take the code from the HTML window and split it consists of three separate files.

+4
source share
4 answers

What will happen is moving outside the jQM area, but 1.html is in location.hash.

Hash changes that occur regardless of the click, for example, when the user clicks the "Back" button, are processed through the hashchange event, which is bound to the window object using Ben Alman hashing a special event plugin (part of jQuery Mobile). When the hash changes (and also when the first page loads), the hashchange event handler will send location.hash to the $ .mobile.changePage () file, a function that, in turn, loads or displays the link page.

I assume that location.hash has an initial 1.html when it loads, but does not track a new page when using window.location to go to a new page. Since you use the browser button, jQM uses the last tracked location, which in your case is 1.html.

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

+3
source

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

Further information here: http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

0
source

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

If you do not install any, I am afraid that JQM is exciting.

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

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

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

Very annoying, and I already asked a question about Github , but since you don't want to use Ajax, you should be fine.

Let me know if that works.

0
source

wild guess. you did not adjust the css class ui-page-active in the .ui-page element correctly? because it will result in both pages appearing.

0
source

More articles:


All Articles