Question

我正在尝试在rails 5中实现加载微调器。当从表视图中删除对象（也从数据库中删除）时，微调器应该出现并旋转。删除操作正在名为destroy.js.erb的文件中处理。问题是我将事件的顺序指定为： 1.显示微调器 2.从数据库中删除 3.发送通知电子邮件 4.隐藏微调器

但是由于某些原因，当我按下删除按钮时，第2步和第3步首先发生，然后发生1步。即使订单很清楚！

如果我删除了delete和send函数（在rails中处理），则javascript命令将正确执行（例如，仅显示然后立即隐藏微调框）。但是，只要在步骤1和步骤4之间进行了rails操作，订单就会混乱。

我已经尝试了几种无效的方法：

我尝试在destroy控制器中运行rails操作，然后渲染destroy.js.erb以显示和隐藏微调器（显然不起作用，因为它将始终首先运行ruby）
我尝试通过指定上面提到的顺序并使用嵌入式ruby进行操作来完成js.erb文件中的所有操作...也没有用，因为总是先执行ruby代码。

任何帮助都会得到体现。

这是我的destroy.js.erb的代码：

$("#spinner").show();

$("#internal_request_<%= @request.id %>").remove();

"<%@request.destroy%>";

"<%CancelRequestMailer.cancel_request_email(@current_requester, @recipients, @request).deliver%>";

$("#spinner").hide();

这是application.js的代码

//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require jquery

$( document ).ready(function() {

  // hide spinner
  $("#spinner").hide();
});

这是按钮的html.erb

<%= link_to request, :method => :delete, data: {:confirm => "Are you sure?"}, remote: true do %>
  <button type="button" class="btn btn-outline-danger">
    <i class="fas fa-ban fa-fw"></i>
  </button>
<% end %>

再次...这一切都在起作用...只是顺序错误...仅在一切都已完成（删除，发送电子邮件..）时才显示微调框

它应该在执行操作之前出现并停留，然后消失。

Answer 1

与其重新发明轮子，不如看看一些可用的常见库和框架。这些通常比自定义代码更好地维护和自定义。

我更喜欢Twitter Bootstrap's spinners。有很多独特的选项，而且非常可定制。

实施加载微调器

1 个答案: