jQuery UI Alert Dialog as a replacement for alert()

Question

I'm using alert() to output my validation errors back to the user as my design does not make provision for anything else, but I would rather use jQuery UI dialog as the alert dialog box for my message.

Since errors are not contained in a (html) div, I am not sure how to go about doing this. Normally you would assign the dialog() to a div say $("#divName").dialog() but I more need a js function something like alert_dialog("Custom message here") or something similiar.

Any ideas?

Pelite

Answer 1

I don't think you even need to attach it to the DOM, this seems to work for me:

$("<div>Test message</div>").dialog();

Here's a JS fiddle:

http://jsfiddle.net/TpTNL/98

Damiendamietta

Answer 2

Using some of the info in here I ended up creating my own function to use.

Could be used as...

custom_alert();
custom_alert( 'Display Message' );
custom_alert( 'Display Message', 'Set Title' );

jQuery UI Alert Replacement

function custom_alert( message, title ) {
    if ( !title )
        title = 'Alert';

    if ( !message )
        message = 'No Message to Display.';

    $('<div></div>').html( message ).dialog({
        title: title,
        resizable: false,
        modal: true,
        buttons: {
            'Ok': function()  {
                $( this ).dialog( 'close' );
            }
        }
    });
}

Amphibrach

Absolutely fabulous little scriptlet there! Thanks for posting! See my answer below where I added a bit to this... – Proceleusmatic

Answer 3

Building on eidylon's answer, here's a version that will not show the title bar if TitleMsg is empty:

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!outputMsg) return;

    var div=$('<div></div>');
    div.html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: onCloseCallback
    });
    if (!titleMsg) div.siblings('.ui-dialog-titlebar').hide();
}

see jsfiddle

Hind

Nice, but you might want to cleanup after adding the element. See: jsfiddle.net/q91cauvf – Cutlet

Answer 4

Just throw an empty, hidden div onto your html page and give it an ID. Then you can use that for your jQuery UI dialog. You can populate the text just like you normally would with any jquery call.

Clarinda

Answer 5

As mentioned by nux and micheg79 a node is left behind in the DOM after the dialog closes.

This can also be cleaned up simply by adding:

$(this).dialog('destroy').remove();

to the close method of the dialog. Example adding this line to eidylon's answer:

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: function() { onCloseCallback();
                           /* Cleanup node(s) from DOM */
                           $(this).dialog('destroy').remove();
                          }
    });
}

EDIT: I had problems getting callback function to run and found that I had to add parentheses () to onCloseCallback to actually trigger the callback. This helped me understand why: In JavaScript, does it make a difference if I call a function with parentheses?

Mockery

Answer 6

DAlert jQuery UI Plugin Check this out, This may help you

Brinker

Answer 7

I took @EkoJR's answer, and added an additional parameter to pass in with a callback function to occur when the user closes the dialog.

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: onCloseCallback
    });
}

You can then call it and pass it a function, that will occur when the user closes the dialog, as so:

jqAlert('Your payment maintenance has been saved.', 
        'Processing Complete', 
        function(){ window.location = 'search.aspx' })

Proceleusmatic

Answer 8

There is an issue that if you close the dialog it will execute the onCloseCallback function. This is a better design.

function jAlert2(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": onCloseCallback,
            "Cancel": function() {
          $( this ).dialog( "destroy" );
            }

        },
    });

Miscreated

Answer 9

Use this code syntax.

   $("<div></div>").html("YOUR MESSAGE").dialog(); 

this works but it append a node to the DOM. You can use a class and then or first remove all elements with that class. ex:

function simple_alert(msg)
{
    $('div.simple_alert').remove();
    $('<div></div>').html(is_valid.msg).dialog({dialogClass:'simple_alert'});
}

Boundary