CODEWITHSUNDEEP
javascriptjquerydom
Sprintstar
Sprintstar

Reputation: 8159

Is there a programatic way of knowing when DOM updates by jQuery have been completed?

For example:

var $myContainer = $('#myContainer');
$myContainer.html(someHtml);
var width = $myContainer.height();
var height = $myContainer.height();

If #myContainer was an empty div, width and height would still be zero. A solution is to use a timeout:

var $myContainer = $('#myContainer');
$myContainer.html(someHtml);
setTimeout(function () {
    var width = $myContainer.height();
    var height = $myContainer.height();
}, 500);

However, I don't like the magic number in there. What if its a really slow browser? Is there any reliable cross browser method available to tell me when the browser has rendered the changes?

Upvotes: 1

Views: 84

Answers (3)

Edison Machado
Edison Machado

Reputation: 1410

Are you using ajax?

So you can use jQuery 'load'.

var $myContainer = $('#myContainer');
$myContainer.load('/url/for/someHtml', function(){
  var width = $myContainer.height();
  var height = $myContainer.height();
});

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074248

You can use 0 for the timeout, reliably. It won't actually be 0ms, you understand, most browsers will make it at least 5 or 10, but just the act of yielding to the browser is sufficient.

That said, I'm not immediately finding a browser that doesn't get the (new) height right immediately, without a yield (even IE6!). But I wouldn't be surprised if, depending on markup and such, there were one...

Upvotes: 1

Aaron Digulla
Aaron Digulla

Reputation: 328594

Feels like a hack but might work: Add a script element to the DOM as the last element. All browsers should execute that after all the other elements have "settled."

Upvotes: 0

Related Questions