Reputation: 2982
I've been experimenting with using a UI Dialog window to display an existing form (page with the form and no layout). I'm not sure if I'm doing this the right way but it seems to work fine minus a couple of pieces of bad behavior. This is the behavior right now:
How could I go about not displaying the dialog until the content is finished loading into the dialog, and how could I force the dialog title to width adjust right after the content is 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>
Thanks!
Upvotes: 3
Views: 2710
Reputation: 2995
You're going to want to call the dialog after the content is loading. You can do this by using $.load's 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>
You may also want to include a hide/show toggle so the #form_load container isn't displayed until the content is loaded.
See jQuery's $.load docs here: http://api.jquery.com/load/
UPDATE: Added .hide() so content isn't shown until dialog is created.
Upvotes: 3