我有一个部分返回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>
答案 0 :(得分:0)
您可以挂钩before
事件来执行此操作:
$(function() {
$("form").on("ajax:before", function() {
$("#spinner, #search_button").toggle();
});
});
然后,在update.js.erb
中,再次添加此内容以将其切换回来:
$("#spinner, #search_button").toggle();
答案 1 :(得分:0)
跟着Dylan的回答,将切换添加到update.js.erb并将以下内容插入到视图中:
<script>
$(function() {
$("#search_button").click(function() {
$("#spinner, #search_button").toggle();
});
});
</script>
非常酷!再次感谢您的帮助。