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

ons.ready() is loading before ready

Any help would be very appreciated. Cheers.

Any help would be very appreciated.
Cheers.