Search code examples
javascriptjqueryjquery-mobilenavigateurl

Understanding jQuerymobile navigation model (how to clear all state when changing pages)

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

Solution

  • 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.