如何隱藏搜索按鈕並在我的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時顯示微調器？

回答

相關問題