How to have jQueryUI dialog box dynamically load content

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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