Javascript jQuery 延迟和对话框

jQuery Deferred and Dialog box

提问by Se0ng11

function ValidateField(){
var bAllow= true;

    //some checking here

if (bAllow == true && apl.val().trim() == "")
{ 
    showDialog(); 
    showDialog().done(function() {
        return true; // wanna return true, but not success
    }).fail(function() {
        return false; //wanna return false, but not success
    });
    return false; //stop it to execute to next line
}
return bAllow; //success return }

function showDialog(){
var def = $.Deferred();
var modPop = '<div id="diaCom" title="Information?"><p>something something</p></div>';
$("#diaCom").remove();
$(modPop).appendTo('body');
$("#diaCom").dialog({
    resizable: false,
    draggable: false,
    height:150,
    width:300,
    modal: true,
    buttons: {
        "Ok": function() {  
            def.resolve();
            $(this).dialog("close");

        },
        "Cancel": function() {
            def.reject();
            $(this).dialog("close");

        }
    }
});

return def.promise();
}
//on click
if (validateField() == true){
        //do something
 }else{
        //do something
  }

hi everyone, any chance to return the value? I wish to return the true and false through showDialog().done() and fail for validatefield() function, but it not working as what I want, I can't assign to bAllow as I had already have a return false to hold the dialog to execute its next line, any idea? Or it is correct to do like these?

大家好，有机会返还价值吗？我希望通过 showDialog().done() 返回 true 和 false 并为 validatefield() 函数失败，但它不能按我想要的方式工作，我不能分配给 bAllow 因为我已经有一个 return false 可以保留执行下一行的对话框，知道吗？或者这样做是正确的？

回答by Pierre

Well, This can work.

嗯，这可以工作。

Your dialog function... showDialog()

你的对话功能... showDialog()

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

and then the code where you use the function...

然后是您使用该功能的代码...

function onclick(){
    var question = "Do you want to start a war?";
    confirmation(question).then(function (answer) {
        var ansbool = Boolean.parse(answer.toString());
        if(ansbool){
            alert("this is obviously " + ansbool);//TRUE
        } else {
            alert("and then there is " + ansbool);//FALSE
        }
    });
}

This may seem wrong for most people. But there is always some situations where you just can't go without return from JQuery Dialog.

这对大多数人来说似乎是错误的。但总有一些情况，你不能不从 JQuery Dialog 返回。

This will basically mimic the confirm() function. But with ugly code and a nice confirm box look :)

这将基本上模仿 confirm() 函数。但是带有丑陋的代码和漂亮的确认框外观:)

I hope this helps some people out.

我希望这可以帮助一些人。

---

---

EDIT: Bootstrap 3 Solution

编辑：Bootstrap 3 解决方案

---

---

我现在正在使用 NakuPanda'sNakuPanda 的引导库，它运行得非常好。基本上与 JQueryUI 相同，但在 Bootstrap UI 中。

function bsConfirm(question) {
    var defer = $.Deferred();
    BootstrapDialog.show({
        type: BootstrapDialog.TYPE_PRIMARY,
        title: 'Confirmation',
        message: question,
        closeByBackdrop: false,
        closeByKeyboard: false,
        draggable: true,
        buttons: [{
            label: 'Yes',
            action: function (dialog) {
                defer.resolve(true);
                dialog.close();
            }
        }, {
            label: 'No',
            action: function (dialog) {
                defer.resolve(false);
                dialog.close();
            }
        }],
        close: function (dialog) {
            dialog.remove();
        }
    });
    return defer.promise();
}
function bsAlert(error, message) {
    BootstrapDialog.show({
        type: error ? BootstrapDialog.TYPE_DANGER : BootstrapDialog.TYPE_SUCCESS,
        title: error ? "Error" : "Success",
        message: message,
        closeByBackdrop: false,
        closeByKeyboard: false,
        draggable: true,
        buttons: [{
            label: 'OK',
            action: function (d) {
                d.close();
            }
        }]
    });
}

and using it (Pretty much the same way)

并使用它（几乎相同的方式）

bsConfirm("Are you sure Bootstrap is what you wanted?").then(function (a) {
    if (a) {
        bsAlert("Well done! You have made the right choice");
    } else {
        bsAlert("I don't like you!");
    }
});

回答by CSQ

I have created this JSFIDDLEand changed the boolean parse because that was blowing up. Thanks, Pierre! This has saved me a lot of time.

我创建了这个 JSFIDDLE并更改了布尔解析，因为它正在爆炸。谢谢，皮埃尔！这为我节省了很多时间。

javascript:

javascript:

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

function onclick(){
var question = "Do you want to start a war?";
confirmation(question).then(function (answer) {
    console.log(answer);
    var ansbool = (String(answer) == "true");
    if(ansbool){
        alert("this is obviously " + ansbool);//TRUE
    } else {
        alert("and then there is " + ansbool);//FALSE
    }
});
}

$("#item").on('click', onclick);

HTML:

HTML：

<button id="item">Hello, click me.</button>

回答by plancton

why not use the reject method instaed of resolve("false"). You will then be able to pass an object as argument. Let's say you have multiple fieldsets of inputs, each one having a delete button :

为什么不使用resolve("false") 的reject 方法。然后，您将能够将对象作为参数传递。假设您有多个输入字段集，每个字段集都有一个删除按钮：

 function confirmation(question,obj) {
    var defer = $.Deferred();
    $('<div></div>')
        .html(question)
        .dialog({
            autoOpen: true,
            modal: true,
            title: 'Confirmation',
            buttons: {
                "Oui": function () {
                    defer.resolve(obj);// pass the object to delete to the defer object
                    $(this).dialog("close");
                },
                "Non": function () {
                    defer.reject();//reject, no need to pass the object
                    $(this).dialog("close");
                }
            },
            close: function () {

                $(this).dialog('destroy').remove()
            }
        });
    return defer.promise();
}

$(document).on("click", ".btn-suppr",function (){// all delete buttons having a class btn-suppr

var question = "Are you sure to delete this fieldset ?";
confirmation(question,$(this)).then(function (obj) {

                                obj.parent('fieldset').remove(); // remove the parent fieldset of the delete button if confirmed

                            });
                        });