如何隐藏搜索按钮并在我的AJAX部分加载到rails 3.1时显示微调器？

我有一个部分从Amazon-ecs API（搜索书籍）返回结果。大约需要2.5秒才能返回值，所以我想添加一个微调（最好隐藏搜索按钮），但是我很难让它工作。如何隐藏搜索按钮并在我的AJAX部分加载到rails 3.1时显示微调器？

我已经有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>

来源

2011-11-27 adarsh

请显示部分。还有什么在等待？导轨螺纹？后台进程等。试图更好地理解q，因为它有点不清楚（也许为什么没有其他A）。 –

澄清了问题并添加了部分代码。亚马逊广告API返回的值需要2-3秒才能返回。因此，我想抛出一个微调，让用户知道查询已提交 – adarsh

您可以挂接到before事件要做到这一点：

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

然后，在你update.js.erb，添加此再次切换回来：

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

来源

2011-11-28 01:57:51

我要求澄清，因为我完全陌生的轨道，但我会把“之前”的代码在哪里我道歉？另外，我注意到我现有的js的位置刷新了部分对输出的影响很大 - 在update.js.erb中切换之前保留它吗？谢谢！ – adarsh

第一个代码块可以在'

与迪伦的答案，添加了toggl e到update.js.erb并将以下内容插入到视图中：

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

非常酷！再次感谢您的帮助。

来源

2011-11-28 15:55:45 adarsh

您不应将其直接添加到视图中。将其放在单独的文件或页面中包含的文件中。如果在单独的文件中，您可以在布局的底部添加“<％= yield：scripts％>”。然后，在你看来，你可以有一个'<％content_for：scripts do％><％javascript_include_tag“your_file”％><% end %>' – Robin

另外，为什么不添加'$（“form”）。on（“ajax：complete”...'在窗体上切换微调器？因为我不确定update.js.erb中的代码将始终被调用，如果模型没有正确保存或类似的东西。 – Robin

如何隐藏搜索按钮并在我的AJAX部分加载到rails 3.1时显示微调器？

回答

相关问题