Ajax загрузка вертушка в Rails 4

Question

Я посылаю АЯКС запрос в рельсах и я получить некоторые данные для моего DataTable

Аякса запуск происходит с помощью пульта дистанционного: правда на ссылку тега

это индекс. 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 %> 

application.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 
    }); 
}); 

я ndex.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(); 
    });