Answered by:
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
- Edited by Web-Farmer Wednesday, July 11, 2012 1:45 PM
Wednesday, July 11, 2012 12:23 PM
Answers
-
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Wednesday, July 11, 2012 2:32 PM
- Marked as answer by MingXu-MSFTMicrosoft employee, Moderator Wednesday, July 25, 2012 4:59 AM
Wednesday, July 11, 2012 2:32 PMModerator -
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Wednesday, July 18, 2012 3:55 PM
- Marked as answer by MingXu-MSFTMicrosoft employee, Moderator Wednesday, July 25, 2012 4:59 AM
Wednesday, July 18, 2012 3:55 PMModerator
All replies
-
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Wednesday, July 11, 2012 2:32 PM
- Marked as answer by MingXu-MSFTMicrosoft employee, Moderator Wednesday, July 25, 2012 4:59 AM
Wednesday, July 11, 2012 2:32 PMModerator -
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...
- Edited by Web-Farmer Wednesday, July 18, 2012 7:48 AM
Wednesday, July 18, 2012 7:48 AM -
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Wednesday, July 18, 2012 3:55 PM
- Marked as answer by MingXu-MSFTMicrosoft employee, Moderator Wednesday, July 25, 2012 4:59 AM
Wednesday, July 18, 2012 3:55 PMModerator