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.

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