views:

169

answers:

2

I love jQueryUI's dialog boxes. However, there doesn't seem to be a way to dynamically load content built-in. I guess I have to use some other approach to achieve this? Will iframes load content only when they're made visible? Is that the right way to do this?

I'm open to other dialog box mechanisms if they're more suited for loading the content only when they're first opened.

+1  A: 

you can create an empty div on your page

<div id="dialog-confirm"><div>

setup a jquery ui dialog with autoopen = false;

$("#dialog-confirm").dialog({
 resizable: false,
  autoOpen: false,
height:140,
modal: true,
buttons: {
'Delete all items': function() {
 $(this).dialog('close');
},
Cancel: function() {
 $(this).dialog('close');
}

} });

then when you want to load a dynamic page, use a jquery ajax call to dynamically put the html into the div and then call dialog Open on that div. here is an example below loading a dynamic page on a button click.

  $("#someButton").click(function()
  {
       $.post("Controller/GetPage", function(data){
            $('#dialog-confirm').html(data);
            $('#dialog-confirm').dialog('open');
       }, "html")};
  }

also, if you page takes a while to load in the ajax call, you might want to use some loading image or jquery blockui plugin to show that something is loading

ooo
+1  A: 

This isn't hard to do -- I wouldn't start messing with iframes for this alone. How about something like this?

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#divInDialog').load('test.html', function() {
       alert('Load was performed.');
     });
   }
});

Basically, you create your dialog, and when it is opened, an html file is loaded from your server, replacing the contents of your <div id="divInDialog"></div>, which should be inside your dialog <div class="selector"/>.

Tauren
+1 - You could also just do `$(this).load("url")` for most situations :)
Nick Craver
@Nick, so true... I'm just used to doing it this way because I have some static content in my dialogs. Thanks for pointing it out.
Tauren
Thank you Tauren and Nick, this is I think what I was looking for. If the user closes the dialog box and then opens it again, will the .load() jQuery function retrieve the data again? I guess if not, I can always set a javascript variable for this...
at
@at: yes, the open event happens each time the dialog is opened, so the content will be replaced each time. take a look at the docs: http://jqueryui.com/demos/dialog/#event-open
Tauren
a bit of a late response. This is the mechanism I used. But the problem now is sometimes the content grows the dialog box too tall (way below screen). How can I limit the height? maxHeight option only works the moment you resize the dialog box.
at