使用 jquery UI 确认表单提交 [英] confirm form submit with jquery UI

问题描述

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

如果用户点击是"，则应提交表单，如果否"则应关闭

这是我的 jquery ui 函数:

 函数确认(消息，回调){$('body').append('<div id="confirm" style="display:none">'+message+'</div>');$( "#confirm" ).dialog({可调整大小:假，title: '确认',zIndex: 99999999,模态:真，纽扣: [{文字:是"，点击:函数(){$(this).dialog("close");如果($.isFunction(回调)){回调.应用()；}}},{文字:不"，点击:function() { $(this).dialog("close");}}],关闭:函数(事件，用户界面){$('#confirm').remove();}});}

还有我的提交功能:

 $('form').submit(function(){<% @meetings.each 做 |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("你确定吗?");}}});});<%结束%><%结束%>如果(消息){返回真；} 别的 {返回假；}});});

解决方案

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

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

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

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

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

HTML

提交表格:<button type="submit">Go</button></表单>

jQuery

function ui_confirm(message, callback) {var dfd = $.Deferred();var dialog = $("
", {id:确认"}).html(消息).appendTo($("body")).data(选择"，假).对话({自动打开:假，可调整大小:假，title: '确认',zIndex: 99999999,模态:真，纽扣: [{文字:是"，点击:函数(){$(this).dialog("close");dfd.resolve(true);如果($.isFunction(回调)){回调.应用()；}}}, {文字:不"，点击:函数(){$(this).dialog("close");dfd.resolve(false);}}],关闭:函数(事件，用户界面){$('#confirm').remove();}});dialog.dialog("打开");返回 dfd.promise();}$(函数(){$('#myForm').submit(function(e) {e.preventDefault();//你的代码$.when(ui_confirm("Are you sure?")).done(function(val) {如果(瓦尔){console.log("提交表单.");$('#myForm')[0].submit();} 别的 {console.log("不要提交表单.");}});});});

I'm trying to confirm a submit form that is created using ruby on rails, but before submitting I have a condition that open a confirm popup asking if the user really wants to do it. This is working with the default confirm browser box. But now i'm trying to do it with Jquery UI but it's not working. How can I return true or false using jquery ui ?

If the user click "yes" the form should be submitted, if "no" it should just close

this is my jquery ui function:

  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();
      }
    });
  }

And my submit function:

     $('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;
          }
        });


      });

解决方案

The issue is in the way that the browser handles it's own alert, confirm, and prompt versus self generated dialogs. You need to add in a try/catch sort of scenario.

I created the following a bit back to address this: https://jsfiddle.net/Twisty/7kp46r22/3/

This uses $.Deferred and $when() to wait for the user to make a selection before returning the results or executing any callbacks.

For your application, this might look like:

Working example: 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.");
      }
    });
  });
});

这篇关于使用 jquery UI 确认表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！