使用 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;
          
        );


      );

【问题讨论】:

你的函数没有返回任何东西。 messagenull 或在任一情况下为空。 【参考方案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 确认表单提交的主要内容,如果未能解决你的问题,请参考以下文章

jQuery确认对话模式 - 无法成功提交表单

如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

在 JQuery 委托中触发表单提交

将 Jquery UI 对话框按钮更改为表单提交按钮

Element UI Form表单验证

在提交表单之前显示弹出窗口/模式以进行确认