JQueryUI - Resize dialog after loading AJAX

Question

I am trying to write a quick plugin that will load some AJAX content in a jQuery user interface dialog and resize and center the dialog accordingly. Here's the gist of what he 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 OK (adding some to fill out the dialog box additions), but the width ALWAYS 274 doesn't matter. I think the dialogue itself sets size limits. How can I configure it to be the natural width of the loaded content?

Edit / Addition: It returns the default size for the modal. Because even if it contains wider content (say, an image of 500 pixels), the parent container (mySelector) may not be so wide (at least in FF), so it was always by default (300 - padding = 274). Is there a way to automatically determine what width of returned content will be minimal without scrolling?)

Answer 1

The key was to open again after loading the content, and then re-center it. This will make the dialog box do this magic and correctly resize all and re-center itself. I will post the plugin here as soon as I clean it.

Answer 2

I had the same problem. If I remember, you need to load the dialog first and then load the contents into it. Thus, the dialog will automatically resize to its contents (with width = auto).

More less it is (checked):

 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); 

Answer 3

A bit late, but this is my working solution:

 $("#dialog" ).dialog({ autoOpen: false, modal: true, width: 'auto', height: 'auto', create: function(){ var content = '<h1>This is some Content</h1>'; $('.content', this).replaceWith(content); buttons: { Ok: function(){ $(this).dialog("close"); } } }); 

The trick was to insert the contents of the dialog box into the "create" handler.