User Interface Dialog Box. How not to display the dialog until the content is loaded?

Question

I experimented using the user interface dialog box to display an existing form (a page with a form and no layout). I'm not sure I'm doing it right, but it seems to work just fine, minus a few pieces of bad behavior. This behavior right now:

• A dialog box opens without opening the cone (very small / empty)
• After about half a second, the contents are loaded, and the window expands through (it looks bad visually)
• Despite the fact that the width of the window expands when loading the content, the title bar does not adjust to the new width and remains very small. Although if resizeable is set to true, the title will expand. It just doesn't respond by adjusting the width when loading content from a hidden div.

How can I not show the dialog until the content finishes loading in the dialog box, and how can I get the dialog title to change the width immediately after the content has finished loading?

<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A>

<script type="text/javascript">
    newItem= function(type) {
      $("#form_load").load(
          '/items/new', {item_type: type}).dialog({
                modal:true,
                draggable: true,
                resizable: false,
                width:'auto',
                height:'auto',
                title: 'Some title',
                position: [150, 150]
          });
    };
</script>

Thank!

Answer 1

You will need to call up a dialog after loading the content. You can do this using the $ .load callback method.

<script type="text/javascript">
    newItem = function(type) {
        $("#form_load").hide().load(
            '/items/new',
            {item_type: type},
            function (data) {
                $(this).dialog({
                    modal     : true,
                    draggable : true,
                    resizable : false,
                    width     : 'auto',
                    height    : 'auto',
                    title     : 'Some title',
                    position  : [100, 100]
                });
            }
        });            
    }
</script>

hide/show, #form_load .

jQuery $.load docs : http://api.jquery.com/load/

UPDATE: .hide(), , .