ons.ready() is loading before ready

[mentizm]

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.

[argelius]

@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

[mentizm]

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

[Fran Diox]

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

[jjyepez]

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

[munsterlander]

@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

[Fran Diox]

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

[Kimpa]

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