Question

我正在尝试确认使用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;
          }
        });


      });

Answer 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.");
      }
    });
  });
});

使用jquery UI确认表单提交

1 个答案: