Rails 4中的Ajax加载微调器 [英] Ajax loading spinner in Rails 4

问题描述

我正在用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 %>

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

index.html.erb

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

我想要的是，当我单击链接以检索此数据时，我希望在指定的时间段内显示正在加载的文本或CSS旋转器，而当该旋转器或文本消失时，则显示数据. /p>

我使用了application.js中的代码，但是无法正常工作.

解决方案

供以后参考，这实际上对我有用，不需要计时器等.只要ajax请求没有完成，就需要花费时间.

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

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

I am sending an ajax request in rails and i receive some data for my datatable

The ajax triggering happens using remote: true on a link tag

this is the index.js.erb (the ajax call is made on this)

$('.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
  });
});

index.html.erb

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

what i want is, when i click on the link to retrieve this data, i want a loading text to appear or a css spinner for a specified period of time and when that spinner or text goes away then the data appear.

I played with the code in application.js but its not working properly.

解决方案

for future reference this is what actually worked for me,no need for timers and such. it takes as long as the ajax request is not finished.

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

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

这篇关于Rails 4中的Ajax加载微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！