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?

Answer 1

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.

Answer 2

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?

Answer 3

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

--James

---

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