jQuery 延迟和对话框

IT技术 javascript jquery jquery-ui
2021-02-09 19:50:46
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
  }

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

3个回答

嗯,这可以工作。

你的对话功能... 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() 函数。但是带有丑陋的代码和漂亮的确认框外观:)

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


**

编辑:Bootstrap 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!");
    }
});
@ChandniShah 请确保您希望它继续使用的代码function位于confirmation("LA?").then(function(){ ... Your code here ... });
2021-03-18 19:50:46
@Pierre:我是否必须为 Deferred 添加任何额外的库并Promise工作?
2021-03-19 19:50:46
@Pierre:感谢您的帮助。但在我的情况下,这个解决方案不起作用。它不会等到我点击是或否按钮。
2021-03-25 19:50:46
@ChandniShah 只有 Jquery 1.5+ 它是一个内置函数。查看https://api.jquery.com/category/deferred-object/更多信息
2021-03-29 19:50:46
我已经多次使用类似的方法。注意:您的代码将保留<div></div>在 DOM 中的配置- 您需要$(this).dialog('destroy').remove()在对话框的close处理程序中使用。
2021-04-03 19:50:46

我创建了这个 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>

为什么不使用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

                            });
                        });