在Rails中显示ajax加载程序图像

Showing ajax loader image in Rails

本文关键字：加载 程序 图像 ajax 显示 Rails      更新时间：2023-09-26

使用Rails 3.2。这是我编码的一个简单的Ajax加载：

# places/revisions.html.erb
<a href="<%= version_path(version) %>" class="diff">View changes</a>
<div id="version"><!-- #version used for ajax -->
  Click "View changes" to see the diff.
</div>
<% content_for :javascript_onload do %>
  $('a.diff').attr('data-remote', 'true');
<% end %>
# versions_controller.rb
class VersionsController < ApplicationController
  def show
    @version = Version.find(params[:id])
  end
end
# versions/show.js.erb
$('#version').html('<%= escape_javascript render :partial => "versions/version", :locals => {:version => @version} %>');

<div id="version"></div>将被通过Ajax获取的新内容所取代。当它仍在加载时，我想在places/revisions.html.erb中的View changes旁边添加一个图像加载程序。我该怎么做？

我假设您使用jQuery触发它。

在视图中，您可以放置一个div，其中除了"查看更改"之外还包含一个图像。

<div id="version"><!-- #version used for ajax -->
  Click "View changes" to see the diff. 
  <div class="image"></div><!-- it should be hidden first. -->
</div>
<a href="#" class="diff">View Changes</a>

并为AJAX触发器提供两个事件。

$('a.diff').click(function(){
   $.ajax({url: 'your url', 
        data: 'your params', 
        beforeSend: function() {
           $('div.image').show();
        }, 
        complete: function() {
           $('div.image').hide();
        }});
});
相关文章：