jQuery: check if a dynamically loaded div is rendered

Question

I create a div dynamically and then should change css properties based on the width of that div:

function test(divID){
    //some actions - creating the div 'tbl' structure
    $('#'+divID).html(tbl); 
    var tw = $('#'+divID).width() + 80;
    $('.page').css("width", tw+"px");   
}

It all works fine in Chrome, but not very stable in FF - sometimes it calculates var tw before the div is rendered and returns its zero width.

How can I sync these events, i.e. measure the width of that div after it has been rendered? I cannot use onLoad, because the whole DOM is loaded before that.

Thanks

A quick hack around it would be to put the code after the `.html` call in a `setTimeout` with timeout 0 — Benjamin Gruenbaum, Mar 03 '14 at 23:28
You may consider using the mutation framework.. that works as an observer design pattern and gives you a notification whenever a node is added to the dom tree.. — Mohammed R. El-Khoudary, Mar 03 '14 at 23:35
Also you can try using native js $('#'+divID)[0].innerHTML = tbl; maybe this would help make things faster and more stable. — Mohammed R. El-Khoudary, Mar 03 '14 at 23:36
The setTimeout hack works - I set 20ms time, but we cannot be sure it will be enough for all end-user browsers. Using native js makes no difference. — user2723490, Mar 03 '14 at 23:43

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

You can force a reflow of content (making sure the new content is in the DOM) by calling for the offsetWidth on an object.

Here your code would look like:

function test(divID){
    //some actions - creating the div 'tbl' structure
    $('#'+divID).html(tbl); 
    $('.page')[0].offsetWidth; // force reflow;
    var tw = $('#'+divID).width() + 80;
    $('.page').css("width", tw+"px");   
}

You wouldn't want to do this in a huge loop as page reflows are relatively expensive operations. instead, you could run a loop that creates divs, then call offsetWidth, then another loop to assign widths.

See "Force Reflow" in CSS transitions in Bootstrap for more info.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 03 '14 at 23:35

Patrick Gunderson

3,263
17
28

I guess, "Force Reflow" should be before measuring the width and not after, right? – user2723490 Mar 03 '14 at 23:46
Doesn't work, regardless of the position of the "force reflow" - before or after width measurement. It simple returns width zero as the DOM has not been rendered. – user2723490 Mar 03 '14 at 23:58

jQuery: check if a dynamically loaded div is rendered

1 Answers1