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

The only way i found with live and callback,

$('p').live('click', function() {
    // delay dont work with html() // fcallback function
    $(this).parent('div').slideUp('slow', function() {
      // empty block
      $(this).html('');
       if($(this).html()==''){
         // function
         myFunction();
       }
    });
});

Answer 3

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 4

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);