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