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? 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.

Epigraphy

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

Heterocercal

+1 - You could also just do $(this).load("url") for most situations :) – Satinet

@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. – Heterocercal

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... – Epigraphy

@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: jqueryui.com/demos/dialog/#event-open – Heterocercal

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. – Epigraphy

I'm trying to use this example, however, I'm having trouble getting the div to open... codetidy.com/722 (the link to the code, problem on line 32) – Refractor

okay let say the loaded page has its own css.. How to prevent it to override the base page? – Legend

Answer 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

Transistor

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

Uppsala