jQuery Deferred和Dialog框 [英] jQuery Deferred and Dialog box

问题描述

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
  }

大家好，有机会退货吗？我希望通过showDialog（）。done（）返回true和false，并且对于validatefield（）函数失败，但它不能正常工作，我无法分配给bAllow，因为我已经有一个返回false来保存执行下一行的对话框，任何想法？或者这样做是正确的吗？

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（）

Your dialog function... 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
        }
    });
}

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

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

这基本上会模仿confirm（）函数。但是丑陋的代码和一个很好的确认框看起来：）

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

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

I hope this helps some people out.

---

编辑：Bootstrap 3解决方案

---

我现在正在使用 NakuPanda的 bootstrap库，它的效果非常好。基本上与JQueryUI相同，但在Bootstrap UI中。

---

Bootstrap 3 Solution

---

I am now using NakuPanda's bootstrap library, It works really well. Basically the same as with JQueryUI but in the 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();
            }
        }]
    });
}

并使用它（几乎相同）

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

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