Question

I’d like to add 2 arguments to a dialog box function. The first argument should be for the box title and the second should be for the box content. I’d like to call this function and set the box’s title and body content on the fly.

Here is what I’d like the function to encompass:

var $dialog = $('<div></div>')
 .html('This dialog will show every time!')
 .dialog({
   height   : 140,
   modal    : true,
   autoOpen : false,
   title    : 'Basic Dialog'
 });

This currently opens the dialog box.

$dialog.dialog('open');

Answer 1

Here’s your function:

function createDialog(title, content)
{
    return $('<div></div>')
        .html(content || 'Defualt content.')
        .dialog({
            height   : 140,
            modal    : true,
            autoOpen : false,
            title    : title || 'Defualt title'
        });
}

---

You can then call the function like this:

$dialog = createDialog('Basic Dialog', 'This dialog will show every time!');

and then open it with $dialog.dialog('open') as you have, or you can open it right away:

createDialog('Basic Dialog', 'This dialog will show every time!').dialog('open');

---

As pointed out by @LordZardeck, the above solution will result in too many stray DOM nodes. You’re better off reusing the same dialog (is it safe to assume you’ll only ever want one dialog at once? I sure hope so!).

If you wish to keep your DOM a little saner, try this:

var createDialog = (function($)
{
    var $dialog = $('<div></div>').dialog({
            height   : 140,
            modal    : true,
            autoOpen : false
        }),
        $content = $dialog.find('.dialog-content');

    return function (title, content)
    {
        $content.html(content || 'Default content.');

        return $dialog.dialog('option', {
                    title    : title || 'Defualt title'
                });
    }
})
(jQuery);

Usage is the same as with the one above.