在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獲取的新內容。 當它仍在加載時，我想在places/revisions.html.erb的View changes旁邊添加一個圖像加載器。 我該怎么辦？

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

});