使用jquery UI确认表单提交

我正在尝试确认使用ruby on rails创建的提交表单，但在提交之前我有条件打开确认弹出窗口，询问用户是否真的想要这样做。 这适用于默认的确认浏览器框。 但现在我正在尝试使用Jquery UI，但它不起作用。 如何使用jquery ui返回true或false？

如果用户单击“是”，则应提交表单，如果“否”则应该关闭

这是我的jquery ui函数：

function confirm(message, callback) { $('body').append('
'+message+'
'); $( "#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(); } }); } 

我的提交function：

  $('form').submit(function(){  ...  $meeting_dates = []; ... $.each($meeting_dates, function (index, value) { $.each($test, function (index2, value2) { ); if (value.priority == "" || "" || "") { if ((value.date == value2.date) && (value.time == value2.time)) { message = confirm("Are you sure?"); } } }); });   if (message) { return true; } else { return false; } }); }); 

Answer 1

问题在于浏览器处理它自己的警报，确认和提示与自生成对话框的方式。 您需要添加try / catch类场景。

我创建了以下内容以解决这个问题： https ： //jsfiddle.net/Twisty/7kp46r22/3/

这使用$.Deferred和$when()等待用户在返回结果或执行任何回调之前进行选择。

对于您的应用程序，这可能如下所示：

工作示例： https ： //jsfiddle.net/Twisty/wtogu9cu/

HTML

 
 Submit Form: Go  

jQuery的

 function ui_confirm(message, callback) { var dfd = $.Deferred(); var dialog = $("
", { 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."); } }); }); });