ons.ready() is loading before ready



  • Hi,

    im working with the beta 2.0 and try to start with the “Onsen UI with plain JavaScript”. The example doesnt work.

    ons.ready(function() {
      // Add another Onsen UI element
      console.log(document.getElementById("my-content"));
      var content = document.getElementById("my-content");
      content.innerHTML="<ons-button>Another Button</ons-button>";
      ons.compile(content);
    });
    

    The ready function is call before the dom is ready and throw an error at the line

    content.innerHTML="<ons-button>Another Button</ons-button>;
    

    because content is NULL.



  • @mentizm Thanks for trying out Onsen UI 2.0! :)

    Actually, in Onsen 2.0 you don’t need to use ons.compile since all elements use the Custom Elements API, which means that they are compiled automagically.

    I wrote a sample where I use ons.ready to wait for the DOM to load and it works fine:

    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/js/onsenui.js"></script>
    <script>
      ons.ready(function() {
        var content = document.getElementById('content');
        content.innerHTML = "<ons-button>Another button</ons-button>";
      });
    </script>
    <ons-page>
      <ons-toolbar>
        <div class="center">Append element</div>
      </ons-toolbar>
      
      <div id="content" style="text-align: center"></div>
    </ons-page>
    

    Codepen example: http://codepen.io/argelius/pen/jWYvZx



  • @argelius Thanks for the sample. If i tried the first time it still not working. Because i have included some angular files.

    <script src="lib/onsenui/js/onsenui.js"></script>
    <!-- <script src="lib/onsenui/js/angular/angular.js"></script> -->
    <!-- <script src="lib/onsenui/js/angular-onsenui.js"></script> -->
    

    after commented out the angular files the script works fine. The ready function is doing his job.

    For me its ok because i dont need the angular file. But this shóuld be solved if someone will use them.


  • Onsen UI

    @mentizm If you include AngularJS then you need to initialize it as well with ons.bootstrap(), for example. If you do that then ons.ready() should wait correctly.



  • Hi, there.
    I’m trying to do some thigs on <ons-navigator> “postchange” event via AngularJS -> var_name.on( … ) method, and I’m not getting the right behavior when inlcuded in ons.ready

    html

    <ons-page ng-controller="myCtrlr">
       <ons-navigator var="nav_app">
          <!--  content  -->
       </ons-navogator>
    </ons-page>
    

    js

    var app = ons.bootstrap();
    app
    .controller('myCtlr', function( $scope ){
       ons.ready(
          nav_app.on('postchange', function(){
              // --- something cool
          })
       )
    })
    

    My fallback so far, has been using $timeout … like this

    var app = ons.bootstrap();
    app
    .controller('myCtlr', function( $scope, $timeout ){
       $timeout( function(){
          nav_app.on('postchange', function(){
              // --- something cool
          })
       }, 100)
    })
    

    So, I dont know if I’m doing something wrong but I wish I can use ons.ready so it’s done the proper way.

    Any help would be very appreciated.
    Cheers.

    jjyepez



  • @jjyepez I believe your issue is due to the postchange event belonging to the tabbar or carousel. I do not see in your code a tabbar or a carousel which is why the event is not firing. More information can be found here:

    https://onsen.io/guide/overview.html#Tabbarevents

    You can also find a lot of information regarding using the ready function for initializing your app:

    https://onsen.io/guide/overview.html#LoadingOnsenUIinYourProject


  • Onsen UI

    @jjyepez You have to pass a function to ons.ready exactly the same way you are doing with $timeout:

    ons.ready(function() {
      ...
    });
    

    Also, as @munsterlander says, there is no postchange event for navigator. I guess you are looking for postpush.



  • Hi

    I know this is old post but maybe any body had this problem like me when i was upgrading onsenui from 2.1.0 -> 2.2.6

    My solution was

    var readyState = setInterval(function() {
                    if (document && document.readyState === 'complete') {
                            clearInterval(readyState);
                            readyState = null;
    
                            // Callback main function
                            ons.ready(callback);
                    }
                }, 10);
    

    /Best regards


Log in to reply