javascript - 如何使用 "Are you sure you want to proceed"模式在 Rails 中使用是和没有按钮来完成或停止保存按钮操作？

Question

我在 HTML 表格中有一个链接，单击它会调用此 Rails Controller 函数:

Controller :

    def match
        render :partial => 'myview/match.js.erb'
    end

上面的 Controller 调用这个js部分:

_match.js.erb

    $('#match_' + <%=@debit.id%>).hide().after('<%= j render("match") %>');

上面的js部分调用了erb下面:

_match.html.erb

  <%= form_for(@debit, remote: true, html: { id: 'match_form' }) do |f| %>
    <%= f.text_field :match_id, style: "width:82px" %>
    <br/><br/>
    <%= button_tag 'Save', class: 'btn btn-primary', id: 'match_submit', style: "width:38px;padding:0px" %> 
    <%= button_tag 'Cancel', class: 'btn btn-secondary', id: 'match_cancel', style: "width:52px;padding:0px" %>
  <% end %>

如上所示部分显示一个text field带 2 个按钮 Save和 Cancel .

现在，当用户输入一个值并单击 Save 时，我想做一些小的验证。

1. 如果验证成功，我想要 Save操作完成(这意味着文本字段和 Save 和 Cancel 按钮将消失，原始 HTML 链接将重新出现，并在文本字段中输入新值 [现在，如果单击具有新编号的链接，然后带有 Save 和 Cancel 按钮的文本字段将重新出现] 即，应允许 Controller 功能 def match 完成)

2. 如果验证失败，我想显示一个弹出窗口，给出类似 Are you sure you want to proceed with this value? 的警告连同 2 个按钮 Yes和 No .

   a) 如果用户点击Yes ，我希望发生与上述情况 1 相同的事情 b) 如果用户点击No , 那么文本字段应该与 Save 一起保持未关闭状态和 Cancel按钮。

请问我怎样才能做到这一点？最简单的方法是什么？

Answer 1

做类似事情的最懒惰的方法是使用旧的 client_side_validations gem 。

您应该能够使用它们提供的回调来制作您想要的行为:

// You will need to require 'jquery-ui' for this to work
window.ClientSideValidations.callbacks.element.fail = function(element, message, callback) {
  callback();
  if (element.data('valid') !== false) {
    element.parent().find('.message').hide().show('slide', {direction: "left", easing: "easeOutBounce"}, 500);
  }
}

window.ClientSideValidations.callbacks.element.pass = function(element, callback) {
  // Take note how we're passing the callback to the hide()
  // method so it is run after the animation is complete.
  element.parent().find('.message').hide('slide', {direction: "left"}, 500, callback);
}

.message {
  background-color: red;
  border-bottom-right-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  padding: 2px 5px;
}

div.field_with_errors div.ui-effects-wrapper {
  display: inline-block !important;
}

否则，您将需要编写大量 JavaScript 来检查所有感兴趣的状态并绘制模态。