check if a div which is inserted by javascript has loaded

Question

I have a page which loads in magento. Since i have to do some quick fix, I need to check if a DIV has loaded. The is inserted using javascript.

div name: umm

using this: https://stackoverflow.com/a/4160706/1147634

var len = jQuery('#umm').append('<a href="#">hi</a>')
    .find('a')
    .load(function() {
        if( --len === 0) {
            alert('all are loaded');
        }
    }).length;

HTML inserted using javascript.

<input id="evtproducttype" type="hidden" value="activities">
<input type="button" onclick="addInputGroup('evt_detail','evt_detaildhtmlgoodies_tabView1','evt_detailtabtitle');" value="+ Add Activity">
<div id="umm"></div>
<div id="dynamicGroupControl"></div>

I have to wait until this divs are loaded.

This doesn't work, and i my div is empty.

Answer 1

Your code looks a good starting point - but why not do this :

function addSomething() {
     $('#parentelement').append('<div>your contents</div>');
     // append is immediate - so you can now do your next step !
}

Things to note - the append function adds the element to a parent - so you need to select the correct parent. Once the append is complete you can do your next step. To call your addition just call the function addSomething()

Updated

You have 2 options ....

Option 1 ... change your onclick :

onclick="addInputGroup('evt_detail','evt_detaildhtmlgoodies_tabView1','evt_detailtabtitle'); addSomething();"

this calls the addSomething function after your addInputGroup function

Option 2 ... Change your function :

function addInputGroup(arg1,arg2,arg3) {
  // do your normal stuff
  addSomething(); // or add the actual code here
}

The second option means its easier to modify every call to the function

Updated again

The only real option you have is to actual call a function when your div is loaded ... you can use the livequery plugin for that - this will trigger a function when the div is actually finished loading :

$('#umm').livequery(function(){ 
  // the div has not loaded
});

Answer 2

The load() event only makes sense on elements associated with an URL (where a resource is loaded from). Since you cant use it on divor a, only images, scripts, frames, iframes, and the window object.

The moment you add the div via js it is inserted into the dom-tree and "ready". YOu dont need to check that. That's only necessary for remote resources.

edit:

you need to wait with that call, until your document is ready (the dom-tree has been constructed)

Use either $(document).ready( <yourcodehere> ) or directly $( <yourcodehere> ) for that reason.