web-dev-qa-db-fra.com

Boîte de dialogue d'alerte jQuery UI en remplacement de alert ()

J'utilise alert() pour renvoyer mes erreurs de validation à l'utilisateur car ma conception ne prévoit rien d'autre, mais je préfère utiliser la boîte de dialogue jQuery UI comme boîte de dialogue d'alerte pour mon message.

Étant donné que les erreurs ne sont pas contenues dans un div (html), je ne sais pas comment procéder. Normalement, vous affecteriez la dialog() à un div disons $("#divName").dialog() mais j'ai plus besoin d'une fonction js quelque chose comme alert_dialog("Custom message here") ou quelque chose de similaire.

Des idées?

javascriptjqueryjquery-uialertjquery-ui-dialog
23
mauzilla

Je ne pense pas que vous ayez même besoin de le joindre au DOM, cela semble fonctionner pour moi:

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

Voici un violon JS:

http://jsfiddle.net/TpTNL/98

44
Clive

En utilisant certaines des informations ici, j'ai fini par créer ma propre fonction à utiliser.

Pourrait être utilisé comme ...

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

remplacement de l'alerte jQuery UI

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

Il suffit de jeter un div vide et caché sur votre page html et de lui donner un ID. Ensuite, vous pouvez l'utiliser pour votre boîte de dialogue d'interface utilisateur jQuery. Vous pouvez remplir le texte comme vous le feriez normalement avec n'importe quel appel jquery.

4
SBerg413

S'appuyant sur la réponse d'eidylon, voici une version qui n'affichera pas la barre de titre si TitleMsg est vide:

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

voir jsfiddle

4
kofifus

Comme mentionné par nux et micheg79, un nœud est laissé dans le DOM après la fermeture de la boîte de dialogue.

Cela peut également être nettoyé simplement en ajoutant:

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

à la méthode de fermeture de la boîte de dialogue. Exemple d'ajouter cette ligne à la réponse d'eidylon:

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: J'ai eu des problèmes pour exécuter la fonction de rappel et j'ai constaté que je devais ajouter des parenthèses () à onCloseCallback pour réellement déclencher le rappel. Cela m'a aidé à comprendre pourquoi: En JavaScript, cela fait-il une différence si j'appelle une fonction entre parenthèses?

2
datascript

DAlert jQuery UI Plugin Vérifiez ceci, cela peut vous aider

1
Dilusha Gonagala

J'ai pris la réponse de @ EkoJR et ajouté un paramètre supplémentaire à transmettre avec une fonction de rappel qui se produit lorsque l'utilisateur ferme la boîte de dialogue.

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

Vous pouvez ensuite l'appeler et lui passer une fonction, qui se produira lorsque l'utilisateur fermera la boîte de dialogue, comme suit:

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

Utilisez cette syntaxe de code.

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

cela fonctionne mais il ajoute un nœud au DOM. Vous pouvez utiliser une classe, puis supprimer d'abord tous les éléments de cette classe. ex:

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

Il y a un problème: si vous fermez la boîte de dialogue, elle exécutera la fonction onCloseCallback. Ceci est une meilleure conception.

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