jquery ui对话框确认 [英] jquery ui dialog box as confirm

问题描述

我正在尝试使用jquery对话框复制javascript的'confirm'框。这是我的代码，

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

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

但当我尝试提醒此方法时，它会显示未定义。它不是在等待弹出窗口显示。如何使这个customConfirm功能等待用户输入（确定/取消）？
我需要的是，customConfirm（）方法将根据用户输入返回true或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.

推荐答案

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

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

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

在此示例中，asyncEvent

In this example, asyncEvent

1）创建延迟的jquery对象

1)creates a jquery deferred object

2）具有解析/拒绝的逻辑，您的确定/取消

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

3）返回延迟。 promise（）对象，然后可以与$ .when一起使用来确定是否已解析或拒绝延迟对象（ok / cancel）。

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).

你会做什么是

1）创建一个jquery延迟对象

1)create a jquery deferred object

2）启动对话框，使用ok / cancel设置deferred.resolve / reject

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

3）返回deferred.promise（）对象，

3)return a deferred.promise() object,

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

4)Use the deferred promise object with $.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" );
});

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

You could also just use resolve and determine if the confirm was true or false in the $.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" );}
});

希望有所帮助。

这篇关于jquery ui对话框确认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！