jquery - Rails 4 中的 Ajax 加载微调器

Question

我在 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 中的代码，但它无法正常工作。

Answer 1

为了将来引用，这是对我有用的，不需要计时器等。只要 ajax 请求未完成，它就需要。

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

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