javascript - 在 Rails 中显示 ajax 加载器图像

Question

使用 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 获取的新内容。虽然它仍在加载，但我想在View changesin旁边添加一个图像加载器places/revisions.html.erb。我该怎么做？

Answer 1

我假设您使用 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();
        }});

});