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

Hopefully somebody has a better solution than myself. A quick workaround is to use setTimeout() to delay your next calls, giving your HTML block enough time to load (since the load time is so miniscule).

$('#some_div').html('<div>some content</div>');
// set timeout for 250 milliseconds
setTimeout(callbackFunction, 250);

function callbackFunction() {
    // do some cool sh*t
}

Note, however, that if you wanted to pass any variables to your function, you could do the following:

$('#some_div').html('<div>some content</div>');
// set timeout for 250 milliseconds
var myParam = 'value';
setTimeout(function() { callbackFunction(myParam); }, 250);

function callbackFunction(myParam) {
    // do some cool sh*t
    alert(myParam);
}

Answer 2

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.