Component not ready in ons.ready

Rork

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

Fran Diox

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

Rork

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);
      });

munsterlander

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

Fran Diox

Demo

Rork

OK thanks!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Component not ready in ons.ready