jquery ui - modal dialog (better way to create con

Question

Is there a way to define the modal content in the javascript, rather than always having to have an element on the page and create the dialog from that?

It has the title option, so I can 'dynamically' create a modal title, but what about the actual content? Like say I need it to say, "you are going to delete image #539". Rather than creating a modal for every possible image - or even from creating the element and then making the dialog from that.

There's got to be a better way.

Answer 1

Thank you Scott. I have added a title attribute for the dialog:

...

var diag = $('<div id="myDialog" title=""><div id="dialogMsg"></div></div>');

...

$('#diag1').click(function() {
    $('#dialogMsg').html('<div class="dialog-body">Message for dialog 1</div>');
    $("#myDialog").dialog({title: 'Dialog Title 1'});
    diag.dialog('open');
});

Demo

Answer 2

Here's another solution, a bit more dynamic:

function showError(errorTitle, errorText) {

    // create a temporary place to store our text
    var window = $('<div id="errorMessage" title="' + errorTitle + '"><span id="dialogMsg">' + errorText + '</span></div>');

    // show the actual error modal
    window.dialog({
        modal: true
    });
}

Then when you need to call the error modal simply do:

showError("Error-Title", "Error message here");

You can imagine adding more parameters to the function to control the width, height, etc.

Enjoy!

Answer 3

You could try something like this:

HTML

<button id='diag1'>First dialog</button>
<button id='diag2'>Second dialog</button>

Javascript

var diag = $('<div id="myDialog" title="Testing!"><span id="dialogMsg"></span></div>');

diag.dialog({
    autoOpen: false,
    modal: true
});

$('#diag1').click(function() {
    $('#dialogMsg').text("Message for dialog 1.");
    diag.dialog("open");
});

$('#diag2').click(function() {
    $('#dialogMsg').text("Message for dialog 2");
    diag.dialog("open");
});

Demo here.