Component not ready in ons.ready



  • Hello,
    I try to access a checkbox component in a splitter menu.
    While in the callback of ons.ready() it appears that the component is not ready.
    Please see the code:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="https://unpkg.com/onsenui@2.1.0/css/onsenui.css"/>
        <link rel="stylesheet" href="https://unpkg.com/onsenui@2.1.0/css/onsen-css-components.css"/>
        <script src="https://unpkg.com/onsenui@2.1.0/js/onsenui.min.js"></script>
        <script>
          ons.ready (function () {
            console.log ("ons ready");
            console.log (document.getElementById ("test"));
            var timeout = 200;
            setTimeout (function () {
              console.log (document.getElementById ("test"));
            }, timeout);
          });
        </script>
      </head>
      <body>
      <ons-splitter>
        <ons-splitter-side id="menu" page="menu.html" side="left" width="240px"></ons-splitter-side>
        <ons-splitter-content id="content" page="page1.html"></ons-splitter-content>
      </ons-splitter>
      <ons-template id="menu.html">
        <ons-page>
          <ons-list>
            <ons-list-item>
              <ons-input type="checkbox" input-id="test"></ons-input>
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-template>
      <ons-template id="page1.html">
        <ons-page id="page1"></ons-page>
      </ons-template>
    </body>
    </html>
    
    

    What could be wrong?
    Thanks


  • Onsen UI

    @Rork ons.ready is for Onsen internals, it has nothing to do with the elements. Instead of that, use page lifecycle events. In your case you should listen for init.



  • I also tried to use the “init” event, but there is another problem, the element is not ready when “init” is called the first time, only on the second time, why?

          ons.ready (function () {
            console.log ("ons ready");
            var listener = function (event) {
              console.log ("init:" + event.target.id);
              console.log (document.getElementById ("test"));
              // document.removeEventListener ("init", listener);
            };
            document.addEventListener ("init", listener);
          });
    
    


  • @Rork That should be outside of the ons.ready().


  • Onsen UI



  • OK thanks!


Log in to reply