Question

I’m setting the html of the body element in an iframe to a string str, then I want to access that content on the next line (here just using an alert call to display the content) but the html and append functions haven’t completed by the time the alert statement is called.

$(function(){
....
$("#notes-tab span.add_draft").bind("click", function(e){
    var str = '';
    $(this).parent().siblings(".tab-content").children(".para").each(function(ind) {
        str += $(this).find('div:first').html();
    });
    var curr = $("#content_rte").contents().find("body").html();
    if (curr == ' ' || curr == '<br>') {
        $("#content_rte").contents().find("body").html(str);
    }
    else {
        $("#content_rte").contents().find("body").append(str);
    }
    alert($("#content_rte").contents().find("body").html());
});
});

And of course neither the html nor the append functions take callbacks.

Could someone tell me how one normally accomplishes waiting for the DOM to be changed before proceeding?

Answer 1

There’s really no direct method for waiting other than setting an arbitrary timeout before you attempt to retrieve the HTML. The code to do so would be:

// wait for 250 ms, then try and retrieve contents
setTimeout(function() {
    alert($("#content_rte").contents().find("body").html());
}, 250);

You should try and make the timeout small enough to go unnoticed but large enough to allow for the contents to update, so you could get away with much less than 250ms.