Monaca Onsen UI Discord Chat Github Repo

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
      var content = document.getElementById("my-content");
      content.innerHTML="<ons-button>Another Button</ons-button>";

    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=""></script>
      ons.ready(function() {
        var content = document.getElementById('content');
        content.innerHTML = "<ons-button>Another button</ons-button>";
        <div class="center">Append element</div>
      <div id="content" style="text-align: center"></div>

    Codepen example:

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


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


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

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

    var app = ons.bootstrap();
    .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.


  • @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:

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

  • 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') {
    						readyState = null;
    						// Callback main function
    			}, 10);

    /Best regards