0

I'm apparently having some trouble understanding page transitions in jquerymobile.

It seems that when I navigate from one page to another (either via a simple anchor href, or $.mobile.navigate), some of the state is passed along.

For example, let's say I declare a variable like so within the script tag of page 1:

<script>
  var randomVar = 'abcd';
</script>

Then on page 2, I have the following script tag:

<script>
  console.log(randomVar);
</script>

If I go straight to page 2, then an error appears on the console: "Uncaught ReferenceError: randomVar is not defined". This is the expected behavior for me.

But if I go to page 1, and then navigate to page 2, the console will print "abcd". So it seems the state/vars from page 1 are being passed along to page 2.

I'd like to prevent this. Is there a way to clear all state when making this transition? I only want this for certain page transitions though. I have navigations to other pages that are modals, but I'd like them to have page 1's state.

I may be thinking about the whole jQM navigation wrong, so please correct me if I am.

Thanks

kane
  • 5,465
  • 6
  • 44
  • 72
  • Pages in JQM share the same DOM. It doesn't change when you navigate between pages as long as Ajax is enabled and whether single or multi-page model is used. What you need to do is to clear variables on `pagecontainerhide` For example. – Omar Jun 14 '14 at 21:31
  • Thanks Omar. I think I'm having trouble clearing the right variables, or maybe it's not variables I'm trying to clear. Here's a better description of my problem if you can help: http://stackoverflow.com/questions/24235047/cant-access-elements-after-jquerymobile-page-change – kane Jun 15 '14 at 23:34

1 Answers1

0

jQuery Mobile loads pages using Ajax. When you go there directly, the full page is loaded (so no state is kept). When you click a page to navigate, jQuery Mobile takes over and loads the new page via Ajax. Since the page has not changed, its state is the same (it's not really "retaining it", it's just leaving things as they are).

Your option is to hook into one of the jQuery Mobile Events such as pagechange and reset/modify any variables or state elements as you desire.

  • Do you have a suggestion on which event I should bind to, given that on some page transitions (popup modals) I want to remain state and on others (page2) I don't? Do I use something like pagehide and look at the url that's being navigated to or is there something else easier? – kane Jun 14 '14 at 21:14
  • `pagechange`? AFAIK, dialogs don't trigger the pagechange event. –  Jun 14 '14 at 21:15
  • This seems to be the right answer although I'm still having trouble clearing out something. I'll post another question when I understand that issue better – kane Jun 15 '14 at 22:32
  • I was able to narrow down my specific issue which may be related to this. It's posted here if anyone can help: http://stackoverflow.com/questions/24235047/cant-access-elements-after-jquerymobile-page-change – kane Jun 15 '14 at 23:33