Rails 4 中的 Ajax 加载微调器答案

【问题标题】：Ajax loading spinner in Rails 4Rails 4 中的 Ajax 加载微调器
【发布时间】：2015-07-26 18:45:42
【问题描述】：

我在 Rails 中发送一个 ajax 请求，我收到了一些数据表的数据

ajax 触发发生在链接标签上使用 remote: true

这是 index.js.erb（ajax 调用是在这个上进行的）

$('.lessons_table').removeClass('hidden');
$('.lessons').empty();

<% @lessons.each do |l| %>
  $('.lessons').append('<tr>');
  $('.lessons').append('<td><%= l.id %></td>');
  $('.lessons').append('<td><%= best_in_place l, :title, url: "lessons/#{l.id}", cancel_button: 'X' %></td>');
  $('.lessons').append('<td><%= best_in_place l, :duration, url: "lessons/#{l.id}", cancel_button: 'X' %></td>');
  $('.lessons').append('<td><%= best_in_place l, :video, url: "lessons/#{l.id}", cancel_button: 'X' %></td>');
  $('.lessons').append('<td><%= best_in_place l, :course_id, url: "lessons/#{l.id}", cancel_button: 'X' %></td>');
  $('.lessons').append('<td><%= link_to "Remove", admin_course_path(l), method: :delete, data: { confirm: "Are you sure?" }%></td>');
  $('.lessons').append('</tr>');
<% end %>

应用程序.js

$(document).ready(function () {
// hide spinner
  $(".spinner").hide();

  $(document).ajaxStart(function() {
    $(".spinner").show();
  }).ajaxComplete(function() {
      var $loading = $(".spinner");
      setTimeout(function(){
          $loading.hide();
      },1000); //Timeout so you can see the loading happen
  });
});

index.html.erb

<div class="spinner">Loading</div>

我想要的是，当我单击链接以检索此数据时，我希望在指定的时间段内出现加载文本或 CSS 微调器，当该微调器或文本消失时，数据就会出现。

我玩过 application.js 中的代码，但它不能正常工作。

【问题讨论】：

您实际上是如何触发 ajax 调用的？您使用的是remote: true 链接还是表单？
啊，是的，对不起，我正在使用远程：链接标签上的 true
您是否尝试在浏览器控制台中查找错误？还要检查网络选项卡，看看是否发送了 XHR 请求。
ajax 响应没问题，我看到了数据，只是假延迟不起作用。它闪烁加载一秒钟然后消失。
实际上它出现在数据上方以便一瞥，然后移动到数据下方，但可能是一秒钟。但我想要的是它显示直到数据在一段时间后显示，而不是一起显示..

标签： jquery ruby-on-rails ruby ajax ruby-on-rails-4

【解决方案1】：

为了将来参考，这对我来说实际上是有效的，不需要计时器等。只要 ajax 请求没有完成就需要它。

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

  $(document).ajaxStart(function() {
    $(".spinner").fadeIn('slow');
  }).ajaxStop(function() {
      $(".spinner").hide();
  });

【讨论】：