JQuery: Execute call when .load() has finished inserting new html?
<p>I have a function that I call to load html returned from a php file into a div. Once the html is placed in the div I want it to call a jquery function for colorbox that shows the div. The problem I have is that the call back is executed before the html is actually placed into the div. Is there a way to get jquery to run a function when the html has actually been placed fully into the div as opposed to when it just finishes executing the php?</p>

<p>The function looks like this...</p>

<pre><code>function viewDetails(vinNum){
    $('#detailsContainer').load('/actions/myfile.php?var='+myVar,function(){
        $(".example3").colorbox({transition:"elastic", speed:"100", inline:true, href:"#hiddenModalContentbox"});
    });
}
</code></pre>

<p>The problem is that the callback is called before it actually finishes putting the html into the div. Could this be caused by the php putting out some html while it's waiting for mysql to give it the data it needs? If so, should I retrieve all the data and echo out all the html at once?</p>

<hr>

<p>EDIT:
this is what I've tried now, with the same result. I also added a javascript alert to the php file that is being loaded. The alert is called AFTER the colorbox is called by the callback.</p>

<pre><code>function viewDetails(myVar) {
    $.ajax({ 
        url: '/actions/myfile.php', 
        data: 'var=' + myVar,
        success: function(html) {
            $('#detailsContainer').html(html);
        },
        complete: function(){
            $(".example3").colorbox({transition:"elastic", speed:"100", inline:true, href:"#hiddenModalContentbox"});
        }
    });
}
</code></pre>

<hr>

<p>EDIT FINAL: I discovered that the colorbox was being called improperly from the beginning. I inherited some of the code from someone else, and I thought it was set up right. All I had to do was remove the (".example3") class call and it works just fine. That class call attaches the method to any links with that class thus calling it BEFORE the callback finishes. All the callback does is reassign the colorbox method to the items with that class again. All my ramblings probably make things clear as mud, but thanks for the input everyone. Here's the final working call...</p>

<pre><code>$('#detailsContainer').load('/actions/myfile.php?var='+myVar,function(){
        $.colorbox({transition:"elastic", speed:"100", inline:true, href:"#hiddenModalContentbox"});                                                                   
    });
</code></pre>
