javascript jquery ui对话框作为确认

jquery ui dialog box as confirm

提问by Anoop Joshi

I am, trying to replicate the 'confirm' box of javascript using jquery dialog. This is my code,

我正在尝试使用 jquery 对话框复制 javascript 的“确认”框。这是我的代码

function customConfirm(customMessage) {
        $("#popUp").html(customMessage);
        $("#popUp").dialog({
            resizable: false,
            height: 240,
            modal: true,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    alert(true);
                    return true;
                },
                Cancel: function () {
                    $(this).dialog("close");
                    alert(false);
                    return false;
                }
            }
        });
    }

But when I tried to alert this method, it shows 'undefined'. It is not waiting for the popup to display. How can i make this customConfirm function to wait for the users input(ok/cancel)?. My need is that, customConfirm() method will return either true of false according to user input.

但是当我尝试提醒此方法时，它显示“未定义”。它不是等待弹出窗口显示。我怎样才能让这个 customConfirm 函数等待用户输入（确定/取消）？。我的需要是，customConfirm() 方法将根据用户输入返回 true 或 false。

回答by Sumit

What you need to do is use jQuery.deferred/promise.

你需要做的是使用 jQuery.deferred/promise。

http://api.jquery.com/deferred.promise/

http://api.jquery.com/deferred.promise/

In this example, asyncEvent

在这个例子中，asyncEvent

1)creates a jquery deferred object

1）创建一个jquery延迟对象

2)has logic for resolve/reject, your ok/cancel

2）有解决/拒绝的逻辑，你确定/取消

3)returns a deferred.promise() object, which can then be used with a $.when to determine if a deferred object is resolved or rejected (ok/cancel).

3) 返回一个 deferred.promise() 对象，然后它可以与 $.when 一起使用来确定一个延迟对象是被解决还是被拒绝（确定/取消）。

What you would do is

你会做的是

1)create a jquery deferred object

1）创建一个jquery延迟对象

2)launch your dialog, with ok/cancel setting the deferred.resolve/reject

2）启动你的对话框，确定/取消设置 deferred.resolve/reject

3)return a deferred.promise() object,

3）返回一个 deferred.promise() 对象，

4)Use the deferred promise object with $.when http://api.jquery.com/jQuery.when/

4）使用 $.when 的延迟承诺对象 http://api.jquery.com/jQuery.when/

function customConfirm(customMessage) {
    var dfd = new jQuery.Deferred();
    $("#popUp").html(customMessage);
    $("#popUp").dialog({
        resizable: false,
        height: 240,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                alert(true);
                dfd.resolve();
            },
            Cancel: function () {
                $(this).dialog("close");
                alert(false);
                dfd.reject();
            }
        }
    });
   return dfd.promise();
}

$.when( customConfirm('hey') ).then(
  function() {
  alert( "things are going well" );
},
function( ) {
  alert( "you fail this time" );
});

You could also just use resolve and determine if the confirm was true or false in the $.when,

您也可以使用解析并确定 $.when 中的确认是真还是假，

function customConfirm(customMessage) {
    var dfd = new jQuery.Deferred();
    $("#popUp").html(customMessage);
    $("#popUp").dialog({
        resizable: false,
        height: 240,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                alert(true);
                dfd.resolve(true);
            },
            Cancel: function () {
                $(this).dialog("close");
                alert(false);
                dfd.resolve(false);
            }
        }
    });
   return dfd.promise();
}

$.when( customConfirm('hey') ).then(
  function(confirm) {

   if(confirm){alert( "things are going well" );}
   else{alert( "you fail this time" );}
});

Hope that helps.

希望有帮助。

回答by pyros2097

This is what I do using zepto with modules deferred and callbacks, works like a charm. Should be similar for jquery or you can just import the deferred and callbacks modules into your html

这就是我使用带有延迟和回调模块的 zepto 所做的，就像一个魅力。应该与 jquery 类似，或者您可以将延迟和回调模块导入您的 html

function customConfirm(customMessage) {
  var d = new $.Deferred();
  $("#popUp").html(customMessage);
  $("#popUp").dialog({
      resizable: false,
      height: 300,
      modal: true,
      buttons: {
          "Yes": function () {
              $(this).dialog("close");
              d.resolve()
          },
          "No": function () {
              $(this).dialog("close");
              d.reject();
          }
      }
  });
 return d.promise();
}

customConfirm("Do you Want to delete the File?")
.then(function(){
  console.log("You Clicked Yes")
})
.fail(function(){
  console.log("You Clicked No")
});

回答by Masudul

You should load dialog on document ready function. Call dialog open on customConfirmfunction,

您应该在文档就绪功能上加载对话框。调用对话框打开customConfirm函数，

  function customConfirm(customMessage) {
    $("#popUp").html(customMessage);
    $("#popUp").dialog("open");
  }

  $(document).ready(function (){
    $("#popUp").dialog({
        resizable: false,
        autoOpen: false,
        height: 240,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                alert(true);
                return true;
            },
            Cancel: function () {
                $(this).dialog("close");
                alert(false);
                return false;
            }
        }
    });

  });