Search code examples
javascripthtmlonsen-uionsen-ui2

Onsen Ui 2 wait for elements to be loaded

I am using Onsen Ui 2. In my page i created a ons-page with some divs in it. After that is my javascript which changes some of these divs by getting it with document.getElementById("mydiv").innerHTML = "Hi";

Than I get the error that the element is undefined, although it should have been loaded and there. When I paste a alert(); in front of the document.get... it will first show the alert and than when the user clicks it away the program gets on with the code: Than the element has been loaded and the code works. How to wait for it until its loaded?

Solution

  • Generally to wait for the initial elements you can do:

    ons.ready(function(){
  document.getElementById("mydiv").innerHTML = "Hi";
});

    And if you are also using some sort of navigation and want to wait for a specific page:

    document.addEventListener('init', function (e) { 
  if (e.target.id == 'myOnsPageId') { // id of the ons-page, NOT the ons-template
    // ...
  }
});