web-dev-qa-db-fra.com

la boîte de dialogue jquery ui doit renvoyer une valeur lorsque l'utilisateur appuie sur le bouton mais ne fonctionne pas

J'ai une boîte de dialogue jquery ui que je veux utiliser pour demander à l'utilisateur de confirmer une suppression. Lorsque l'utilisateur appuie sur "oui" ou "non", je dois renvoyer "True" ou "False" pour continuer l'exécution de javascript. Le problème avec le code ci-dessous est lorsque la boîte de dialogue apparaît, elle exécute immédiatement un "return true;" mais l'utilisateur n'a pas encore appuyé sur le bouton "Oui"?

Qu'est-ce que je fais mal?

HTML:

<div id="modal_confirm_yes_no" title="Confirm"></div>

Appel Javascript:

$("#modal_confirm_yes_no").html("Are you sure you want to delete this?");
var answer = $("#modal_confirm_yes_no").dialog("open");

if (answer)
{
     //delete
}
else
{
     //don't delete
}

Jquery dialog:

$("#modal_confirm_yes_no").dialog({
                bgiframe: true,
                autoOpen: false,
                minHeight: 200,
                width: 350,
                modal: true,
                closeOnEscape: false,
                draggable: false,
                resizable: false,
                buttons: {
                        'Yes': function(){
                            $(this).dialog('close');
                            return true;
                        },
                        'No': function(){
                            $(this).dialog('close');
                            return false;
                        }
                    }
            });
jqueryjquery-ui
21
Ronedog

javascript est asynchrone.

vous devez donc utiliser des rappels:

   $("#modal_confirm_yes_no").dialog({
            bgiframe: true,
            autoOpen: false,
            minHeight: 200,
            width: 350,
            modal: true,
            closeOnEscape: false,
            draggable: false,
            resizable: false,
            buttons: {
                    'Yes': function(){
                        $(this).dialog('close');
                        callback(true);
                    },
                    'No': function(){
                        $(this).dialog('close');
                        callback(false);
                    }
                }
        });
    function callback(value){
         //do something
    }
37
Neal

Vous devriez voir cette réponse.

Ça peut marcher.

Votre fonction de dialogue ... showDialog ()

function confirmation(question) {
    var defer = $.Deferred();
    $('<div></div>')
        .html(question)
        .dialog({
            autoOpen: true,
            modal: true,
            title: 'Confirmation',
            buttons: {
                "Yes": function () {
                     $(this).dialog("close");
                    defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false.

                },
                "No": function () {
                    $(this).dialog("close");
                    defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false.

                }
            },
            close: function () {
                $(this).remove();
            }
        });
    return defer.promise();
}

et ensuite le code où vous utilisez la fonction ...

function onclick(){
    var question = "Do you want to start a war?";
    confirmation(question).then(function (answer) {

        if(answer=="true"){
            alert("this is obviously " + ansbool);//TRUE
        } else {
            alert("and then there is " + ansbool);//FALSE
        }
    });
}

Cela peut sembler faux pour la plupart des gens. Mais il existe toujours des situations dans lesquelles vous ne pouvez pas y aller sans avoir à revenir de JQuery Dialog.

Cela imitera fondamentalement la fonction confirm (). Mais avec du code moche et une jolie boîte de confirmation, regardez :)

J'espère que cela aide certaines personnes.

Honnêtement, j'ai pris beaucoup de temps pour cela, enfin j'ai trouvé la meilleure solution.Vous pouvez voir plus de détails ici => Awesome Solution

1
Jze

Si quelqu'un a besoin d'une démonstration graphique du comportement asynchrone, en voici une qui pourrait être utile. Enveloppez le dialogue de Ronedog dans une fonction. J'ai utilisé "showConfirm" ci-dessous. Capturez la valeur de retour dans une variable. Appelez-le lors d'un événement de clic de bouton et essayez d'alerter le bouton sur lequel vous avez appuyé:

$('.btn').on('click', function(event) {
    var cVal = showConfirm('Really?');
    alert('User pressed ' + cVal);  
});

Vous constaterez que vous recevez toujours l'alerte avant de pouvoir appuyer sur le bouton. Comme javascript est asynchrone, la fonction d'alerte n'a pas à attendre le résultat de la fonction showConfirm. 

Si vous configurez ensuite la fonction de Neal, tout fonctionnera (merci Neal).

1
BobRodes

Vous devez utiliser les fonctions de rappel. Voici l'exemple de travail:

Voici l’icône de la fa. Lorsque l'utilisateur clique dessus, il appelle javascript.

  <a href="#" id="removeNode"><i class="fa fa-minus-circle fa-lg"></i></a>

Voici le code javascript exécuté lorsque l'utilisateur clique sur l'icône fa "Remove Node".

$("a#removeNode").click(function(){
  // returns the attribute of "selected" Table Row either it is expanded or collapsed based on it's class 
  var datattid = $("tr.expanded.selected, tr.collapsed.selected").attr("data-tt-id"); 
  //alert($("tr.expanded.selected").attr("data-tt-id"));  
  if(typeof datattid != 'undefined'){
    //alert(datattid);
    displayConfirmDialog("You are trying to remove selected node : " + datattid + ". Are you sure?", proceedToRemoveNode);
  }else 
  {
    showErrorDialog("Invalid Row Selection", "Node is not selected.\n You must select the node to remove it." );
  //  displayMessage ("#dialog-message", "Invalid Row Selection", "ui-icon-heart",  "Node is not selected.\n You must select the node to remove it." );  
  }
});

DisplayConfirmDialog affiche le message de confirmation et, selon son utilisation, appelle la fonction de rappel. Voici le code de displayConfirmDialog. 

//Confirmation dialog to remove node
function displayConfirmDialog(message, proceedWithRequest)
{
    var retVal;

    $("div#dialog-confirm").find("p").html(message);

    var confirmDlg = $( "#dialog-confirm" ).dialog({
          resizable: false,
          height: "auto",
          width: 400,
          modal: true,
          buttons: {
          "Remove Node": function() {
            this.retVal = true;
            proceedWithRequest()  
            $( this ).dialog( "close" );
          },
          Cancel: function() {
            this.retVal = false;
            $( this ).dialog( "close" );
          }
        },
        show:{effect:'scale', duration: 700},
        hide:{effect:'explode', duration: 700}  
    });

    confirmDlg.dialog("open");  
}

Voici la fonction de rappel:

//Callback function called if user  confirms to remove node.
function proceedToRemoveNode()
{
  var datattid = $("tr.expanded.selected, tr.collapsed.selected").attr("data-tt-id"); 
  $("#nh_table").treetable("removeNode", datattid);
  showErrorDialog("Node removed successfully", "The node " + datattid + " is removed successfully" );
//  alert("The node " + datattid + " is removed successfully");
}

Vous trouverez ci-dessous des images d'application en cours de traitement qui supprime le nœud d'une TreeTable à l'aide de JQuery.

 enter image description here

Après confirmation, le nœud "qa-2" est supprimé de l'arborescence, comme indiqué dans l'image suivante.

 enter image description here

0
Rahul Varadkar