Problem with single page navigator pattern. How to unload/stop previous DOM/Javascript execution ?

Question

Hi folks,

I'm using single page navigation pattern in my app. And so far navigation works fine.. going one page to another page and again coming back to same page and so forth... looks like a browser's back and forward..

Problem starts here...

Page 1(P1) fetches data from "n" number of async data sources- a web services. here n is BIG (say 30 xhr). Now, while P1 is busy loading data via ajax requests and meanwhile if someone click on any links from P1 which leads to page 2(P2) and boom.........

- that code still being executed even i'm in now P2 page... and that javascript code search for DOM elements of P1 which are now no longer exist as navigator has loaded the fragment for P2 page.

Questions: 

1) how to fix this behavior or is there any way I can tell navigator to "unload the Previous page DOM" when i'm on a specific page ?

2) What if I remove the single page navigation pattern from my app ? Is there any other way rather than directly using href in anchor <a href="/html/p2.html"> or window.location = p2.html

3) Is it compulsory to use single page navigator or is it recommended by metro guideline ?

Here some one has mentioned the same problem of javascript timers using setTimeout() for single page navigation pattern.

Ref: http://devhammer.net/blog/w8wil-3-timers-using-settimeout-in-a-windows-8-app

Answer 1

Hi WF,

Here is a great place to start for Navigation patterns in Metro style app development: http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx

You should cancel outstanding xhr calls before navigating to the next page: http://msdn.microsoft.com/en-us/library/windows/apps/jj150586.aspx

You should also add a test to ensure that you can access an element with the result of the xhr before trying to set the value to avoid errors (you may not be able to cancel all the requests because the result may already be queued).

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Its little complex to abort the xhr requests because i'm dealing with so many xhr request that is being sent from different part of app..

Thanks for reply...

Answer 3

Then you will need to test for the possibility that the element may not be available and add try catch handling as well.

-Jeff

---

Jeff Sanders (MSFT)