locked
Error when attemtping to use flyouts

    Question

  • Hello! I've been having a lot of problems with messages while developing my Metro app, and I'm not that great at debugging errors, so please bear with me :/ When attempting to use the quickstart at http://msdn.microsoft.com/en-us/library/windows/apps/hh465354.aspx I get the following error:

    JavaScript runtime error: Unable to get value of the property 'show': object is null or undefined

    at

    flyout.show(anchor, "bottom");

    Thanks,

    Matthew

    Thursday, January 26, 2012 12:18 AM

Answers

  • Hi Matthew,

    A couple of things you may need that you have missed.

    First include all the js libraries in your page HTML:

    <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/binding.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
        <script src="/winjs/js/uicollections.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
     

    Then ensure you call process all and hook up your event handler to the button click event in your page JS file (fragment append or mainwindowactivated:

     

       WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function () {
                    var anchor = document.getElementById("buyButton");
    
                    anchor.addEventListener("click", function () {
    
                        var flyoutElement = document.getElementById("confirmOrderFlyout");
                        var flyout = WinJS.UI.getControl(flyoutElement);
                        flyout.show(anchor, "bottom");
                    });
    
                });
    
            }
        }

    -Jeff

     


    Jeff Sanders (MSFT)
    Thursday, January 26, 2012 3:48 PM
    Moderator

All replies

  • Hi Matthew,

    A couple of things you may need that you have missed.

    First include all the js libraries in your page HTML:

    <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/binding.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
        <script src="/winjs/js/uicollections.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
     

    Then ensure you call process all and hook up your event handler to the button click event in your page JS file (fragment append or mainwindowactivated:

     

       WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function () {
                    var anchor = document.getElementById("buyButton");
    
                    anchor.addEventListener("click", function () {
    
                        var flyoutElement = document.getElementById("confirmOrderFlyout");
                        var flyout = WinJS.UI.getControl(flyoutElement);
                        flyout.show(anchor, "bottom");
                    });
    
                });
    
            }
        }

    -Jeff

     


    Jeff Sanders (MSFT)
    Thursday, January 26, 2012 3:48 PM
    Moderator
  • Hi Matthew,

    A couple of things you may need that you have missed.

    First include all the js libraries in your page HTML:

     

    <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/binding.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
        <script src="/winjs/js/uicollections.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
     

    Then ensure you call process all and hook up your event handler to the button click event in your page JS file (fragment append or mainwindowactivated:

     

     

     

       WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function () {
                    var anchor = document.getElementById("buyButton");
    
                    anchor.addEventListener("click", function () {
    
                        var flyoutElement = document.getElementById("confirmOrderFlyout");
                        var flyout = WinJS.UI.getControl(flyoutElement);
                        flyout.show(anchor, "bottom");
                    });
    
                });
    
            }
        }

    -Jeff

     

     


    Jeff Sanders (MSFT)

    Ah, thank you, it worked perfectly.
    Friday, January 27, 2012 12:12 AM