javascript - jQuery Deferred とダイアログボックス

Question

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() 関数で失敗したいのですが、希望どおりに機能しません。保持する false を既に持っているため、bAllow に割り当てることはできません。次の行を実行するためのダイアログ、アイデアはありますか? それとも、このようにするのが正しいですか？

score 32 · Accepted Answer

まあ、これはうまくいきます。

ダイアログ関数... showDialog()

function confirmation(question) {
    var defer = $.Deferred();
    $('<div></div>')
        .html(question)
        .dialog({
            autoOpen: true,
            modal: true,
            title: 'Confirmation',
            buttons: {
                "Yes": function () {
                    defer.resolve(true); //answer
                    $(this).dialog("close");
                },
                "No": function () {
                    defer.resolve(false); //answer
                    $(this).dialog("close");
                }
            },
            close: function () {
                $(this).remove(); //removes this dialog div from DOM
            }
        });
    return defer.promise();
}

そして、関数を使用するコード...

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

これは、ほとんどの人にとって間違っているように思えるかもしれません。しかし、JQuery Dialog からのリターンなしではどうにもならない状況が常に存在します。

これは基本的に confirm() 関数を模倣します。しかし、醜いコードと素敵な確認ボックスの外観:)

これが何人かの人々を助けることを願っています。

**

編集: ブートストラップ 3 ソリューション

**

私は今 [NakuPanda's][1] のブートストラップライブラリを使用しています。基本的には 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();
            }
        }]
    });
}

そしてそれを使用する（ほとんど同じ方法）

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

score 5 · Accepted Answer

私はこの JSFIDDLEを作成し、ブーリアン解析を変更しました。ありがとう、ピエール！これにより、多くの時間を節約できました。

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:

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

score 1 · Accepted Answer

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

                            });
                        });

javascript - jQuery Deferred とダイアログ ボックス

3 に答える 3

編集: ブートストラップ 3 ソリューション

Related

Reference

javascript - jQuery Deferred とダイアログボックス