将HTML内容加载到DIV后调整颜色框的大小

Question

I've ventured to any and all of the posts here about colorbox resizing issues, div properties and numerous other things! Anyway, this very VERY simple piece of code is driving me up a wall and I wonder if it couldn't be answered?

<script type="text/javascript">
$(document).ready(function () {
    $("#text").load("<%= Model.FileLocation %>");
    $.fn.colorbox.resize();
});
</script>
<div id="text"></div>

Above is the code (which, I would imagine - should work like a charm). I've tried using a $.get and putting the resize in a callback, using timeouts and separating things with functions.

I've also verified that nothing is broken, the text is being loaded (doing an alert with $("#text") as the message shows me the loaded text. Also I can specify widths and/or heights for the resize function and they work find, however, I can't do this based on the loaded content.

Sorry for the long-winded post... any ideas why in the world this thing will not resize?

Answer 1

Try waiting until the content is actually loaded.

<script type="text/javascript">
$(document).ready(function () {
    $("#text").load("<%= Model.FileLocation %>", function() {
         $.fn.colorbox.resize();
    });
});
</script>
<div id="text"></div>

Answer 2

Thanks to anyone who read and tried to come up with a reason to why this didn't work, however, I finally found a work-around.

It appears that for some reason, even putting the resize() in a success callback, it was still getting called too early. I was able to open firebug and manually enter the colorbox.resize() function in the command line and it worked just fine after loading, even though the callback failed.

So what I did was this

$(document).ready(function () {
        jQuery.ajaxSettings.async = false;

        $('#text').load('<%= Model.FileLocation %>');
        $.fn.colorbox.resize();
});

Setting the async in ajax to false forced it to be called in turn, and now it works great and is loading very quickly.