Answered by:
WinJS NavBar event handler crashing Windows 8.1 HTML5/JS app when navigating to another page

Question
-
I am developing an HTML/JS app for Windows 8.1 and am having trouble debugging a crash that is ocurring on within a handler attached to the top NavBar object when the user navigates from the page the handler is attached to.
The functionality is pretty simple: when the user lands on the screen in question, I am automatically displaying a WinJS Flyout using it's .show() method. Now, when the user invokes the top NavBar object, I have a handler that hides the Flyout object. I also have another handler that .shows() the Flyout when the NavBar is dismissed.
The problem occurs when the user navigates to another page. Here is my code for the screen in question:
var appBar = class.that.constructs.NavBar; ready : function (element, options) { var self = this; ... appBar.topControl.onbeforeshow = self.hideFlyout; appBar.topControl.onbeforehide = self.showFlyout; $('#flyout').addClass('activated'); $('#flyout')[0].winControl._sticky = true; $('#flyout')[0].winControl.show(); }, hideFlyout: function() { $('#flyout').topControl.winControl.hide(); }, showFlyout: function() { $('#flyout').topControl.winControl.show(); }, unload: function () { appBar.topControl.onbeforeshow = null; appBar.topControl.onaftershow = null; }
As you can see, I am removing the event handlers upon unloading the page, but that doesn't seem to do the trick. I still get this crash error:
JavaScript runtime error: Unable to get property 'classList' of undefined or null reference
It crashes on the showFlyout handler. Does anybody have any suggestions as to how to avoid the crash upon navigating to a new page?
Wednesday, December 11, 2013 6:59 PM
Answers
-
Hi, if you refer to the documentation for Flyout show(), you can see that it requires some parameters. http://msdn.microsoft.com/en-us/library/windows/apps/br211727.aspx
Specifically, you need to pass an HTMLElement to anchor the flyout:
- anchor
Type: HTMLElement
Required. The DOM element to anchor the Flyout.
- Proposed as answer by SeanHsiLee Thursday, December 12, 2013 1:30 AM
- Marked as answer by Jamles HezModerator Tuesday, December 24, 2013 8:32 AM
- Unmarked as answer by Jamles HezModerator Tuesday, December 24, 2013 8:33 AM
- Marked as answer by Jamles HezModerator Monday, December 30, 2013 6:45 AM
Thursday, December 12, 2013 1:29 AM -
Hi ariestav,
The DOM element to anchor the flyout is the one you need to fill in the show() as the parameter. You have to know where you display your flyout and set the element as the anchor.
For instance the flyout "formatTextFlyout" will be display next to formatTextButton.
function showFormatTextFlyout() { var formatTextButton = document.getElementById("formatTextButton"); document.getElementById("formatTextFlyout").winControl.show(formatTextButton); }
More sample code can be found: http://code.msdn.microsoft.com/windowsapps/Flyout-sample-258757b3
<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.- Marked as answer by Jamles HezModerator Monday, December 30, 2013 6:45 AM
Tuesday, December 24, 2013 8:41 AMModerator
All replies
-
Hi, if you refer to the documentation for Flyout show(), you can see that it requires some parameters. http://msdn.microsoft.com/en-us/library/windows/apps/br211727.aspx
Specifically, you need to pass an HTMLElement to anchor the flyout:
- anchor
Type: HTMLElement
Required. The DOM element to anchor the Flyout.
- Proposed as answer by SeanHsiLee Thursday, December 12, 2013 1:30 AM
- Marked as answer by Jamles HezModerator Tuesday, December 24, 2013 8:32 AM
- Unmarked as answer by Jamles HezModerator Tuesday, December 24, 2013 8:33 AM
- Marked as answer by Jamles HezModerator Monday, December 30, 2013 6:45 AM
Thursday, December 12, 2013 1:29 AM -
Thanks, but since the user is navigating away from the screen upon clicking the navbar, what do you suggest I send to the .show() method?Thursday, December 12, 2013 6:09 PM
-
Hi ariestav,
The DOM element to anchor the flyout is the one you need to fill in the show() as the parameter. You have to know where you display your flyout and set the element as the anchor.
For instance the flyout "formatTextFlyout" will be display next to formatTextButton.
function showFormatTextFlyout() { var formatTextButton = document.getElementById("formatTextButton"); document.getElementById("formatTextFlyout").winControl.show(formatTextButton); }
More sample code can be found: http://code.msdn.microsoft.com/windowsapps/Flyout-sample-258757b3
<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.- Marked as answer by Jamles HezModerator Monday, December 30, 2013 6:45 AM
Tuesday, December 24, 2013 8:41 AMModerator