How to have jQueryUI dialog box dynamically load content

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.

Solution 1:

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"/>.

Solution 2:

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

Solution 3:

I would personally create a "view" for your dialog box, then extend onto your dialog box being generated. For a test case I used the following "view":

var dialog = {
    title: 'Dialog WITHOUT Modal',
    modal: false,
    height: 300
};

Then extending onto a dialog box:

$('#modal-btn-btns').click(function(){
    $('#dialog-modal-btns')
        .dialog($.extend(dialog, {
            modal: true,
            width: 500,
            title: "Dialog with modal AND buttons",
            buttons: {
                "Trigger ALERT": function(){alert("NICE CLICK!@!@!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});