我正在尝试确认使用 ruby on Rails 创建的提交表单，但在提交之前我有一个条件，即打开一个确认弹出窗口，询问用户是否确实想要这样做。这与默认确认浏览器框一起使用。但现在我试图用 Jquery UI 来做到这一点，但它不起作用。如何使用 jquery ui 返回 true 或 false？
如果用户单击"is"，则应提交表单，如果“否”，则应关闭
这是我的 jquery ui 函数:
function confirm(message, callback) {
$('body').append('<div id="confirm" style="display:none">'+message+'</div>');
$( "#confirm" ).dialog({
resizable: false,
title: 'Confirm',
zIndex: 99999999,
modal: true,
buttons: [
{
text: "Yes",
click: function() {
$(this).dialog("close");
if ($.isFunction(callback)) {
callback.apply();
}
}
},{
text: "No",
click: function() { $(this).dialog("close");}
}
],
close: function(event, ui) {
$('#confirm').remove();
}
});
}
我的提交功能:
$('form').submit(function(){
<% @meetings.each do |mt| %>
...
<%# cvalue_starthour.value %>
$meeting_dates = [];
...
$.each($meeting_dates, function (index, value) {
$.each($test, function (index2, value2) {
);
if (value.priority == "<%= l(:default_priority_trivial) %>" || "<%= l(:default_priority_minor) %>" || "<%= l(:default_priority_major) %>") {
if ((value.date == value2.date) && (value.time == value2.time)) {
message = confirm("Are you sure?");
}
}
});
});
<% end %>
<% end %>
if (message) {
return true;
} else {
return false;
}
});
});
最佳答案
问题在于浏览器处理自己的警报、确认和提示与自行生成的对话框的方式。您需要添加 try/catch 类型的场景。
我创建了以下内容来解决这个问题:https://jsfiddle.net/Twisty/7kp46r22/3/
这使用 $.deferred() 和 $.when() 等待用户在返回结果或执行任何回调之前做出选择。
对于您的应用程序，这可能如下所示:
工作示例:https://jsfiddle.net/Twisty/wtogu9cu/
HTML
<form id="myForm">
Submit Form:
<button type="submit">Go</button>
</form>
jQuery
function ui_confirm(message, callback) {
var dfd = $.Deferred();
var dialog = $("<div>", {
id: "confirm"
})
.html(message)
.appendTo($("body"))
.data("selection", false)
.dialog({
autoOpen: false,
resizable: false,
title: 'Confirm',
zIndex: 99999999,
modal: true,
buttons: [{
text: "Yes",
click: function() {
$(this).dialog("close");
dfd.resolve(true);
if ($.isFunction(callback)) {
callback.apply();
}
}
}, {
text: "No",
click: function() {
$(this).dialog("close");
dfd.resolve(false);
}
}],
close: function(event, ui) {
$('#confirm').remove();
}
});
dialog.dialog("open");
return dfd.promise();
}
$(function() {
$('#myForm').submit(function(e) {
e.preventDefault();
// your code
$.when(ui_confirm("Are you sure?")).done(function(val) {
if (val) {
console.log("Submit the form.");
$('#myForm')[0].submit();
} else {
console.log("Do not submit the form.");
}
});
});
});
查看更多:
关于javascript - 使用 jquery UI 确认表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39453976/