Как я могу скрыть кнопку поиска и показать счетчик, пока мой AJAX частично загружается в рельсах 3.1? - PullRequest
Новая
       28

Как я могу скрыть кнопку поиска и показать счетчик, пока мой AJAX частично загружается в рельсах 3.1?

2 голосов
/ 28 ноября 2011

У меня есть партиал, который возвращает результаты из API Amazon-ecs (поиск книг). Для возврата значений требуется около 2,5 секунд, поэтому я хочу добавить спиннер (и в идеале скрыть кнопку поиска), но мне было трудно заставить его работать.

У меня уже есть javascript, обновляющий партию результатами. Мне бы просто хотелось, чтобы кнопка давала мне вертушку (и скрывала кнопку поиска), пока частичная загрузка не завершится.

Вот мой основной вид (index.html.erb), который отображает часть результатов поиска, каждый из которых временно добавляется как объект в 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>

Мой единственный JS-код находится в файле update.js.erb, который выглядит следующим образом: 

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

Я уверен, что это легко, но я не могу заставить его работать. Спасибо!

РЕДАКТИРОВАТЬ: мой частичный "_amazon_returned.html.erb" выглядит как 

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

Ответы [ 2 ]

0 голосов
/ 28 ноября 2011

Пошли с ответом Дилана, добавили переключатель в файл update.js.erb и вставили в представление следующее: 

<script>
$(function() {
 $("#search_button").click(function() {
  $("#spinner, #search_button").toggle();
 });
});
</script>

Очень круто!Еще раз спасибо за помощь.

0 голосов
/ 28 ноября 2011

Вы можете подключиться к событию before, чтобы сделать это: 

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

Затем, в вашем update.js.erb, добавьте это снова, чтобы переключить их обратно: 

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