How to have jQueryUI dialog box dynamically load content

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

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

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!');});