Rails＆Ajax /異步加載部分

我有以下工作很好，加載部分點擊鏈接。我遇到了麻煩，無論如何修改這個，以便在文檔準備好或類似的部分加載。我基本上想要異步加載我的慢加載部分。任何人都可以指出我正確的方向嗎？我覺得這可能是一個小改動來實現這一點。Rails＆Ajax /異步加載部分

#ProductsController 
def show_territories 
    respond_to do | format | 
    format.js {render :layout => false} 
    end 
end 

#products/show.html.erb 
<%= link_to 'Show Territories', show_territories_product_path(:id => @product.id), :remote => true %> 
<div id="spinner" class="spinner"><%= image_tag("ajax-loader-2.gif") %></div> 
<div id="territories" class="tab-contents"></div> 

#products/show_territories.js.erb 
$("#territories").html("<%= escape_javascript(render(:partial => "territories")) %>"); 

#products/_territories.html.erb 
<!--- partial view code goes here ---> 


#custom.js 
$(function(){ 
// hide it first 
$("#spinner").hide(); 

// when an ajax request starts, show spinner 
$(document).ajaxStart(function(){ 
    $("#spinner").show(); 
}); 

// when an ajax request complets, hide spinner  
$(document).ajaxStop(function(){ 
    $("#spinner").hide(); 
}); 
});

來源

2013-05-07 Raoot

如果你有一些東西在很多頁面加載，我建議你去看看在這個非常有趣的帖子： http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/和擴展名：http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-執行 – MrYoshiji 2013-05-07 15:25:42

那麼你可以通過調用click（）來手動觸發部分加載。

<%= link_to 'Show Territories', show_territories_product_path(:id => @product.id), :remote => true, :id => 'territories_link' %> 

$(function(){ 
    // hide it first 
    $("#spinner").hide(); 

    $('#territories_link').click(); 

    ... 
});

來源

2013-05-07 15:21:37 Raindal

這真棒，完美的作品，我可以通過Chrome的RailsPanel看到我得到兩個進程加載異步。我的微調停止了工作，但我會弄清楚。謝謝！！ – Raoot 2013-05-07 15:28:29

好！很高興我可以幫助：）僅供參考，它爲什麼加載異步的原因是JavaScript「點擊」鏈接，但不等待響應發生，只是繼續執行其餘的代碼。 – Raindal 2013-05-07 15:35:21

是的，很酷，很確定這正是我需要的。只有我擔心的是，如果我的更快的加載元素由於某種原因而停止運行，也許在完成之前加載它可能會阻礙它們的加載。但是，如果他們是異步的，也許不會。 – Raoot 2013-05-07 15:38:51

我一直想一些東西了基於rails's jquery-ujs（handleRemote方法）的代碼。看來，這工作得很好，沒有必要把一個實際的鏈接在頁面：

$(function() { 
     var tmpElement = $(document.createElement('a')) 
     tmpElement.data('remote',true) 
     tmpElement.prop('href', '<%= j show_territories_product_path(id: @product.id) -%>') 
     $.rails.handleRemote(tmpElement) 
    })

來源

2013-10-09 08:07:22 Crystark

大把戲！很棒的作品，只需要小心Turbolinks！ – 2016-02-18 20:00:09

Rails＆Ajax /異步加載部分

回答

相關問題