В диалоговом окне jquery ui необходимо вернуть значение, когда пользователь нажимает кнопку, но не работает

У меня появилось диалоговое окно jquery ui, которое я хочу использовать, чтобы предложить пользователю подтвердить удаление. Когда пользователь нажимает "да" или "нет", мне нужно вернуть "True" или "False", чтобы продолжить выполнение javascript. Проблема с приведенным ниже кодом заключается в том, что при появлении диалогового окна он немедленно выполняет "return true"; но пользователь еще не нажал кнопку "Да"?

Что я делаю неправильно?

HTML:

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

Javascript call:

$("#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:

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

Ответ 1

javascript является асинхронным.

поэтому вам нужно использовать обратные вызовы:

   $("#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
    }

Ответ 2

Если кому-то нужна графическая демонстрация асинхронного поведения, здесь может оказаться полезным. Диалоговое окно Wrap Ronedog в функции. Я использовал "showConfirm" ниже. Захватите возвращаемое значение в переменной. Назовите его в каком-то событии нажатия кнопки и попробуйте предупредить, какая кнопка была нажата:

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

Вы обнаружите, что всегда получаете предупреждение, прежде чем сможете нажать кнопку. Поскольку javascript является асинхронным, функция предупреждения не должна ждать результата функции showConfirm.

Если вы затем настроите функцию Neal, все будет работать (спасибо Neal).

Ответ 3

U должен увидеть этот ответ.

Ну, это может сработать.

Ваша функция диалога... 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();
}

а затем код, в котором вы используете функцию...

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

Это может показаться неправильным для большинства людей. Но всегда есть ситуации, когда вы просто не можете вернуться из JQuery Dialog.

Это будет в основном имитировать функцию confirm(). Но с уродливым кодом и приятным подтверждением выглядят окна:)

Надеюсь, это поможет некоторым людям.

Честно говоря, я потратил много времени на это, наконец, нашел лучшее решение. Вы можете увидеть более подробно здесь = > Удивительное решение

Ответ 4

Вам нужно использовать функции обратного вызова. Вот рабочий пример:

Далее находится значок fa. Когда пользователь нажимает на нее, он вызывает javascript.

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

Ниже приведен код javascript, выполненный, когда пользователь нажимает кнопку "Удалить Node" fa.

$("a#removeNode").click(function(){
  // returns the attribute of "selected" Table Row either it is expanded or collapsed based on it 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 отображает подтверждающее сообщение и на основе действия использования вызывает функцию обратного вызова. Вот код 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");  
}

Ниже приведена функция обратного вызова:

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

Ниже приведены изображения рабочего приложения, которое удаляет node из TreeTable с помощью JQuery.

После подтверждения, node "qa-2" удаляется из дерева, как показано на следующем рисунке.

Ответ 5

function confirm() {
        $("#dialog-message").dialog({
                modal : true,
                buttons: {
                    "Yes" : function() {
                        $(this).dialog("close");
                        document.forms[0].action = "actionname-yes";

                        document.forms[0].submit();                         
                    },
                    "No" : function() {
                            $(this).dialog("close");
                            document.forms[0].action = "actionname-no";
                            document.forms[0].submit();
                    }       
                }
        });