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

you can create an empty div on your page

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