jQuery UI Alert Dialog als Ersatz für alert()

Ich benutze alert() um meine Validierungsfehler an den Benutzer zurückzugeben, da mein Design nichts anderes vorsieht, aber ich würde lieber den jQuery-UI-Dialog als Warndialogfeld für meine Nachricht verwenden.

Da Fehler nicht in einem (html) div enthalten sind, bin ich mir nicht sicher, wie ich das machen soll. Normalerweise würden Sie die zuweisen dialog() zu einem div sagen $("#divName").dialog() aber ich brauche mehr eine js-Funktion so etwas wie alert_dialog("Custom message here") oder etwas ähnliches.

Irgendwelche Ideen?

Ich glaube nicht, dass Sie es sogar an das DOM anhängen müssen, das scheint für mich zu funktionieren:

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

Hier ist eine JS-Geige:

http://jsfiddle.net/TpTNL/98

Mit einigen der Informationen hier habe ich schließlich meine eigene Funktion erstellt, die ich verwenden kann.

Kann verwendet werden als…

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

jQuery UI Alert-Ersatz

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

Aufbauend auf eidylons Antwort ist hier eine Version, die die Titelleiste nicht anzeigt, wenn TitleMsg leer ist:

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();
}

sehen jsfiddle

Werfen Sie einfach ein leeres, verstecktes div auf Ihre HTML-Seite und geben Sie ihm eine ID. Dann können Sie das für Ihren jQuery-UI-Dialog verwenden. Sie können den Text so ausfüllen, wie Sie es normalerweise bei jedem JQuery-Aufruf tun würden.

Wie von nux und micheg79 erwähnt, bleibt ein Knoten im DOM zurück, nachdem der Dialog geschlossen wurde.

Dies kann auch einfach durch Hinzufügen von bereinigt werden:

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

zur close-Methode des Dialogs. Beispiel für das Hinzufügen dieser Zeile zu eidylons Antwort:

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();
                          }
    });
}

BEARBEITEN: Ich hatte Probleme, die Rückruffunktion zum Laufen zu bringen, und stellte fest, dass ich Klammern () zu onCloseCallback hinzufügen musste, um den Rückruf tatsächlich auszulösen. Das hat mir geholfen zu verstehen, warum: Macht es in JavaScript einen Unterschied, ob ich eine Funktion mit Klammern aufrufe?

DAlert jQuery-UI-Plugin Probieren Sie es aus, das kann Ihnen helfen

Ich habe die Antwort von @EkoJR genommen und einen zusätzlichen Parameter hinzugefügt, der mit einer Callback-Funktion übergeben wird, die auftritt, wenn der Benutzer den Dialog schließt.

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

Sie können es dann aufrufen und ihm eine Funktion übergeben, die ausgeführt wird, wenn der Benutzer den Dialog schließt, wie folgt:

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