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.
-
@mentizm If you include AngularJS then you need to initialize it as well with
ons.bootstrap()
, for example. If you do that thenons.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.readyhtml
<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
-
@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 forpostpush
.
-
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