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.
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.
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);
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();
}
});
});
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);
}
