jQueryUI - Resize Dialog after AJAX Load

Question

Im trying to write a quick plugin that will load some AJAX content into a jQuery UI dialog and resize and center the dialog accordingly. Here's the gist of what it does:

$(mySelector).html('Loading...').load(options.url, function() {

    element = $(mySelector);

    element.dialog('option', 'height', element.height() + 50);
    element.dialog('option', 'width', element.width());
    element.dialog('option', 'position', 'center');

});

The height seems to be OK (adding some for padding the dialog adds) but the width is ALWAYS 274 no matter what. I think the dialog itself is setting the size limits on it. How can I set it to what the natural width of the loaded content would be?

Edit/Addition: It is returning the default size of the modal. Because even if it contains content that is wider (say a 500px image), the parent container (mySelector) may not be that wide (in FF at least), so it was always the default (300 - padding = 274). Is there any way to auto-detect what the width of the returned content would be at a minimum without it scrolling?)

Answer 1

I used to have the same problem. If I remember, you need to first load the dialog and then load the content in it. That way, the dialog will auto resize to its content (with width=auto).

More less like this (tested):

var $dialog; //Must be at the global scope
function dialog(url) {
    $dialog.dialog("option", "width", "auto");
    $dialog.dialog("option", "height", "auto");
    $.get(url,{},function(html) {
        $dialog.html(html);
        $dialog.dialog("open");
    });
}

$(function() {
    //Initialize (without showing it)
    var $dialog = $('<div id="dialog" title=""></div>').dialog({
        autoOpen: false,
        modal: true
    });
});

Then you can do this:

dialog(someURL);