2

我有一个从 Amazon-ecs API（搜索书籍）返回结果的部分。返回值大约需要 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>
4

2 回答 2

0

您可以挂钩before事件来执行此操作：

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

然后，在您的 中update.js.erb，再次添加它以将它们切换回来：

$("#spinner, #search_button").toggle();
于 2011-11-28T01:57:51.000 回答
0

使用 Dylan 的回答，将切换添加到 update.js.erb 并将以下内容插入到视图中：

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

很酷！再次感谢您的帮助。

于 2011-11-28T15:55:45.877 回答