How to call a function after a div is ready

Question

I have the following in my javascript file   var divId    divIDer    jQuery divId  ready function       createGrid       Adds a grid to the html       The html looks something like    lt div id  divIDer  gt  lt div gt    But sometimes my createGrid   function gets called before my divIder is actually loaded onto the page   So then when I try to render my grid it can t find the proper div to point to and doesn t ever render   How can I call a function after my div is completely ready to be used   Edit   I m loading in the div using Extjs   var tpl   new Ext XTemplate    lt div id   divId   gt  lt  div gt      tpl apply

User · Answer

To do something after certain div load from function  load    I think this exactly what you need         divIDer   load document URL       divIDer  function                call here what you want                  example            mydata   show

User · Answer

inside your  lt div gt  lt  div gt  element you can call the   document  ready function       execute a command  something like   lt div id  div1  gt       lt script gt            document  ready function               do something                  lt  script gt   lt  div gt    and you can do the same to other divs that you have  this was suitable if you loading your div via partial view

User · Answer

Thus far  the only way to  listen  on DOM events  like inserting or modifying Elements  was to use the such called Mutation Events  For instance  document body addEventListener  DOMNodeInserted   function  event         console log  whoot  a new Element was inserted  see my event object for details        false     Further reading on that  MDN  The Problem with Mutation Events was  is  they never really made their way into any official spec because of inconcistencies and stuff  After a while  this events were implemented in all modern browser  but they were declared as deprecated  in other words  you don t want to use them     The official replacement for the Mutation Events is the MutationObserver   object   Further reading on that  MDN  The syntax at present looks like  var observer   new MutationObserver function  mutations         mutations forEach function  mutation              console log  mutation type                  var config     childList  true     observer observe  document body  config      At this time  the API has been implemented in newer Firefox  Chrome and Safari versions  I m not sure about IE and Opera  So the tradeoff here is definitely that you can only target for topnotch browsers

User · Answer

Through jQuery ready function you can specify function that s executed when DOM is loaded  Whole DOM  not any div you want   So  you should use ready in a bit different way    ready function         createGrid          This is in case when you dont use AJAX to load your div

User · Answer

You can use recursion here to do this  For example   jQuery document  ready checkContainer    function checkContainer        if     divIDer   is   visible        if the container is visible on the page     createGrid       Adds a grid to the html     else       setTimeout checkContainer  50     wait 50 ms  then try again         Basically  this function will check to make sure that the element exists and is visible  If it is  it will run your createGrid   function  If not  it will wait 50ms and try again   Note   Ideally  you would just use the callback function of your AJAX call to know when the container was appended  but this is a brute force  standalone approach

[javascript] How to call a function after a div is ready?

Examples related to javascript

Examples related to jquery

Examples related to html