How can I hide a search button and show a spinner while my AJAX partial loads in rails 3.1?

Question

I have a partial which returns results from the Amazon-ecs API (searches for books). It takes about 2.5 seconds to return values, so I want to add a spinner (and ideally hide the search button) but I've had a tough time getting it to work.

I already have javascript refreshing the partial with the results. I'd just like the button to give me a spinner (and hide the search button) until the partial finishes reloading.

Here is my main view (index.html.erb) which renders a partial of search results, each of which is added temporarily as an object in AmazonItems:

<%= form_tag amazon_items_path, :method => :get, :remote => true do %>
  <p>
  <%= text_field_tag :query, params[:query] %>

  <span id="spinner" style="display:none">
    <%= image_tag 'ajax-loader.gif' %>
  </span>

  <span id="search_button">
    <%= submit_tag "Search" %>
  </span>

  </p>
<% end %>

<h1>Searching Amazon</h1>

<div id="amazon_returned">
  <%= render 'amazon_returned' %>
</div>

My only JS code is in the update.js.erb file, which looks like:

$("#amazon_returned").html("<%=j render 'amazon_returned' %>");

I'm sure this is easy, but I can't get it work. Thanks!

EDIT: my partial "_amazon_returned.html.erb" looks like

<table>
<% for amazon_item in @amazon_items %>
  <td> amazon_item.title </td>
  ...ETC...
<% end %>
</table>

Answer 1

You can hook into the before event to do this:

$(function() {
  $("form").on("ajax:before", function() {
    $("#spinner, #search_button").toggle();
  });
});

Then, in your update.js.erb, add this again to toggle them back:

$("#spinner, #search_button").toggle();