jquery html callback

Question

Is there a callback for the html() function or a way to check that it is finished. For example:

$("#some_div").html('something here');

if($("#some_div").html() == ''){
//do something here
}

I am setting the html of an element from a post. Sometimes it doesnt load so when it doesnt load I would like for it to do something, is this possible. The way I have it now it always does the other thing because it hasnt set the html by the time it checks that it has html.

Answer 1

html() is a synchronous operation. The actual updating of the DOM depends on what your html content is. If you have <img> or <iframe> tags, they will take time to load. The next statement following the html() should immediately see the new html contents.

Did you mean load() instead?

[Edit] Based on your comment, it is probably your $.ajax failing. Not html(). Try attaching a failure handler to ajax call and retry from there? Although, if your server side code silently fails with a 200 code, the failure event doesn't get called. In that case, you can validate the html value before you set it to the element.

Answer 2

Chetan Sastry's answer(the highest answer now) is not 100% correct.

$('#some_div').html('<div id="new_div">some content</div>'); // code 1    
$('#new_div').click(function(){ }); //code 2

I don't know why, but in some cases, code 2 will be executed before code 1 finishing. There is a short time less than 0 millisecond between code 1 and code 2. It should be some special executing orders in Javascript.

You have to use cballou's way(the floor answer =_=!) to solve the problem. e.g.

var sync = function(fn, millisec){
    var m = millisec ? millisec : 0; //in face, 0 is enough
    return setTimeout(fn,m);
};

$('#some_div').html('<div id="new_div">some content</div>'); // code 1    
var code2 = function(){
    $('#new_div').click(function(){ }); // run code 2, here
};

sync(code2);