[英]jquery ui dialog box as confirm
I am, trying to replicate the 'confirm' box of javascript using jquery dialog. 我正在尝试使用jquery对话框复制javascript的“确认”框。 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;
}
}
});
}
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)?. 如何使这个customConfirm功能等待用户输入(确定/取消)? My need is that, customConfirm() method will return either true of false according to user input. 我需要的是,customConfirm()方法将根据用户输入返回true或false。
What you need to do is use jQuery.deferred/promise. 你需要做的是使用jQuery.deferred / promise。
http://api.jquery.com/deferred.promise/ http://api.jquery.com/deferred.promise/
In this example, asyncEvent 在此示例中,asyncEvent
1)creates a jquery deferred object 1)创建一个jquery延迟对象
2)has logic for resolve/reject, your ok/cancel 2)有解决/拒绝的逻辑,你的确定/取消
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). 3)返回一个deferred.promise()对象,然后可以与$ .when一起使用,以确定是否已解析或拒绝延迟对象(ok / cancel)。
What you would do is 你要做的是
1)create a jquery deferred object 1)创建一个jquery延迟对象
2)launch your dialog, with ok/cancel setting the deferred.resolve/reject 2)启动对话框,使用ok / cancel设置deferred.resolve / reject
3)return a deferred.promise() object, 3)返回一个deferred.promise()对象,
4)Use the deferred promise object with $.when http://api.jquery.com/jQuery.when/ 4)使用延迟的promise对象与$ .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" );
});
You could also just use resolve and determine if the confirm was true or false in the $.when, 您也可以使用resolve并确定$ .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" );}
});
Hope that helps. 希望有所帮助。
This is what I do using zepto with modules deferred and callbacks, works like a charm. 这就是我使用zepto进行模块延迟和回调,就像一个魅力。 Should be similar for jquery or you can just import the deferred and callbacks modules into your html 对于jquery应该是类似的,或者你可以将deferred和callbacks模块导入你的html
function customConfirm(customMessage) {
var d = new $.Deferred();
$("#popUp").html(customMessage);
$("#popUp").dialog({
resizable: false,
height: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
d.resolve()
},
"No": function () {
$(this).dialog("close");
d.reject();
}
}
});
return d.promise();
}
customConfirm("Do you Want to delete the File?")
.then(function(){
console.log("You Clicked Yes")
})
.fail(function(){
console.log("You Clicked No")
});
You should load dialog on document ready function. 您应该在文档就绪功能上加载对话框。 Call dialog open on customConfirm
function, 在customConfirm
函数上打开调用对话框,
function customConfirm(customMessage) {
$("#popUp").html(customMessage);
$("#popUp").dialog("open");
}
$(document).ready(function (){
$("#popUp").dialog({
resizable: false,
autoOpen: false,
height: 240,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
alert(true);
return true;
},
Cancel: function () {
$(this).dialog("close");
alert(false);
return false;
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.