wake-up-neo.com

jQuery UI-Warnungsdialog als Ersatz für alert ()

Ich verwende alert(), um meine Überprüfungsfehler an den Benutzer zurückzugeben, da mein Design nichts anderes vorsieht, sondern ich möchte das Dialogfeld der jQuery-Benutzeroberfläche als Warnungsdialogfeld 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 dialog() einem div say $("#divName").dialog() zuweisen, aber ich brauche mehr eine js-Funktion wie alert_dialog("Custom message here") oder etwas Ähnliches.

Irgendwelche Ideen?

javascriptjqueryjquery-uialertjquery-ui-dialog
23
mauzilla

Ich glaube nicht, dass Sie es an das DOM anhängen müssen, das scheint bei mir zu funktionieren:

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

Hier ist eine JS-Geige:

http://jsfiddle.net/TpTNL/98

44
Clive

Unter Verwendung einiger Informationen hier habe ich schließlich meine eigene Funktion zur Verwendung erstellt.

Könnte verwendet werden als ...

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

Wirf einfach ein leeres, verstecktes Div auf deine HTML-Seite und gib ihr eine ID. Dann können Sie das für Ihren jQuery UI-Dialog verwenden. Sie können den Text wie gewohnt mit jquery-Aufrufen füllen.

4
SBerg413

Aufbauend auf der Antwort von Eidylon 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();
}

siehe jsfiddle

4
kofifus

Wie von nux und micheg79 erwähnt, bleibt nach dem Schließen des Dialogfelds ein Knoten im DOM zurück.

Dies kann auch einfach durch Hinzufügen aufgeräumt werden:

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

auf die Schließ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 beim Ausführen der Rückruffunktion und musste Klammern () zu onCloseCallback hinzufügen, um den Rückruf auszulösen. Dies half mir zu verstehen, warum: Macht es in JavaScript einen Unterschied, wenn ich eine Funktion mit Klammern aufrufe?

2
datascript

DAlert jQuery UI Plugin Überprüfen Sie dies, dies kann Ihnen helfen

1
Dilusha Gonagala

Ich habe die Antwort von @ EkoJR genommen und einen zusätzlichen Parameter hinzugefügt, der mit einer Rückruffunktion übergeben wird, die beim Schließen des Dialogfelds auftritt.

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 eine Funktion übergeben, die auftritt, wenn der Benutzer den Dialog schließt.

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

Verwenden Sie diese Codesyntax.

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

dies funktioniert, hängt jedoch einen Knoten an das DOM an. Sie können eine Klasse verwenden und dann oder zuerst alle Elemente mit dieser Klasse entfernen. Ex:

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

Es gibt ein Problem, bei dem beim Schließen des Dialogfelds die Funktion onCloseCallback ausgeführt wird. Dies ist ein besseres 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" );
            }

        },
    });
0
Chris