使用 jquery UI 确认表单提交
Posted
技术标签:
【中文标题】使用 jquery UI 确认表单提交【英文标题】:confirm form submit with jquery UI 【发布时间】:2017-01-20 02:34:45 【问题描述】:我正在尝试确认使用 ruby on rails 创建的提交表单,但在提交之前,我有一个条件会打开一个确认弹出窗口,询问用户是否真的想要这样做。这适用于默认的确认浏览器框。但现在我正在尝试使用 Jquery UI 来完成它,但它不起作用。如何使用 jquery ui 返回 true 或 false ?
如果用户单击“是”,则应提交表单,如果“否”则应关闭
这是我的 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;
);
);
【问题讨论】:
你的函数没有返回任何东西。message
是 null
或在任一情况下为空。
【参考方案1】:
问题在于浏览器处理它自己的警报、确认和提示与自行生成的对话框的方式。您需要添加一个 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.");
);
);
);
查看更多:
https://api.jquery.com/category/deferred-object/ https://api.jquery.com/jQuery.Deferred/ https://api.jquery.com/jQuery.when/【讨论】:
使用该代码,当我单击提交时,该功能不会停止,它会提交,然后出现确认表单。因为我正在使用 rails ajax 提交,但在提交之前我正在 js 中进行此验证 @terrorista 有些东西没有加起来。由于代码已执行并发送到浏览器,因此它正在客户端执行。因此e.preventDefault()
应该阻止浏览器将数据提交到服务器,直到表单元素再次以编程方式提交。也许我错过了什么?以上是关于使用 jquery UI 确认表单提交的主要内容,如果未能解决你的问题,请参考以下文章