locked
Can't access SettingsFlyout's DOM with inline Javascript.

    Question

  • <div id="pageOptions" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Options" data-win-options="{settingsCommandId:'pageOptions'}">
        <button id="test"></button>
    </div>
    
    <script>
        var b = document.getElementById("test"); // returns null
    </script>

    Also tried accessing the DOM by putting everything in a function and trying to get it to trigger like <body onload="testDom()"> only to find out that onload doesn't even trigger on the flyout (because I assume it's being inlined into the parent page).

    EDIT: Very strange!

    Doesn't work

    (function() {
        console.log(document.getElementById('test')); // null
    })();

    Works!

    window.setTimeout(function() {
        console.log(document.getElementById('test')); // This works
    }, 1);
    Anyone know what's going on?




    • Edited by KNadh Friday, November 9, 2012 10:20 AM Typo
    Friday, November 9, 2012 7:49 AM

Answers

  • Hi,

    Please notice javascript is case sensitive.

    <script>
        var b = document.getElementByID("test"); // returns null
    </script>

    Please change that as:

    var b = document.getElementById("test");

    And the other code is working normal on my side. Please check again.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Monday, November 12, 2012 1:43 AM
    Friday, November 9, 2012 9:17 AM
  • Ok, I figured it out myself. It's a bit disappointing that this isn't documented properly on MSDN. Here's what's to do, in case someone else experiences the same problem.

    The correct way to run JS, it seems, is via the ready() hook you get by adding a definition for your SettingsFlyout page. Example:

    WinJS.UI.Pages.define("/options.html", {
       ready: function (element, options) {
           // everything in here works beautifully
       }
    });
    • Marked as answer by KNadh Friday, November 9, 2012 11:40 AM
    Friday, November 9, 2012 11:40 AM

All replies

  • Hi,

    Please notice javascript is case sensitive.

    <script>
        var b = document.getElementByID("test"); // returns null
    </script>

    Please change that as:

    var b = document.getElementById("test");

    And the other code is working normal on my side. Please check again.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Monday, November 12, 2012 1:43 AM
    Friday, November 9, 2012 9:17 AM
  • Of course. Sorry, it was just a typo in the post. getElementById is how it is throughout the code.
    Friday, November 9, 2012 10:21 AM
  • Hi,

    Yes. I am sure the code is no problem.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Friday, November 9, 2012 10:23 AM
  • Sorry, I meant I mis-typed the code in the post. The code in the project is correct (as now seen in the original post), but the problem persists. It still has the strange behaviour.
    Friday, November 9, 2012 10:31 AM
  • Ok, I figured it out myself. It's a bit disappointing that this isn't documented properly on MSDN. Here's what's to do, in case someone else experiences the same problem.

    The correct way to run JS, it seems, is via the ready() hook you get by adding a definition for your SettingsFlyout page. Example:

    WinJS.UI.Pages.define("/options.html", {
       ready: function (element, options) {
           // everything in here works beautifully
       }
    });
    • Marked as answer by KNadh Friday, November 9, 2012 11:40 AM
    Friday, November 9, 2012 11:40 AM