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

问题描述

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

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

这是我的jquery ui函数：

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

我的提交功能：

     $('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类型的场景。

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.

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

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

此用途 $。延迟和 $ when（）等待用户在返回结果或执行任何结果之前做出选择回调。

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:

工作示例： 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屋！