rails link_to：遠離ajax加載的內容

嘿大家好，我正在開發一個應用程序，並且我在使用新的Rails 3 link_to時遇到了困難。這是情況 - 我的「主頁」頁面上有兩個div，每個div都使用ajax填充到document.load中。這按預期工作。rails link_to：遠離ajax加載的內容

在我加載到這些div的頁面內容中，我想使用link_to ...：remote => true功能。該源按照預期與data-remote =「true」標記進行呈現，但是當我點擊鏈接時，它們完全被忽略（該鏈接被視爲常規超鏈接）。

我已經編寫了能正確處理所有事情的.rjs文件（因爲它們在硬編碼時工作），所以這不是問題。

下面是阿賈克斯加載內容的HTML源：

<div> 
    <a href="/cart/add/2" data-remote="true">Link A</a> 
    <a href="/cart/add/1" data-remote="true">Link B</a> 
</div>

點擊時通常嵌入到網頁中的鏈接之一，導致我的購物車，以正確地更新......然而，當我動態加載這個內容到AJAX頁面，鏈接只是跟着忽略data-remote =「true」...

最初我以爲它和原型沒有正確加載AJAX的東西有關，但我'我已經檢查了所有這一切，並沒有改變一件事...

我真的很困惑...有沒有人有這個想法？

# add method of controller 
def add 
    product = Product.find_by_id(params[:product_id]) 
    params[:quantity] ||= 1 
    params[:price] ||= product.price 

    unless product.nil? 
    @line = session[:cart].purchase_lines.select {|l| l.product_id == product.id}.first 
    unless @line.nil? 
     @line.quantity = (@line.quantity + params[:quantity].to_i) 
    else # create a new purchase_line in the cart 
     @line = session[:cart].purchase_lines.build({ :product_id => product.id, :price => params[:price], :quantity => params[:quantity].to_i }) 
    end 
    else 
    flash[:error] = "Unable to add the selected product" 
    end 
end

和我RJS

# add.rjs 
page.if page['product_' << @line.product_id.to_s] do 
    page.replace 'product_' << @line.product_id.to_s, :partial => 'line' 
page.else 
    page.insert_html :bottom, 'cart', :partial => 'line' 
end 

page.replace_html 'sub_total', number_to_currency(session[:cart].sub_total, :unit => '$') 
page.replace_html 'tax', number_to_currency(session[:cart].tax, :unit => '$') 
page.replace_html 'total', number_to_currency(session[:cart].sub_total+session[:cart].tax, :unit => '$') 
page.visual_effect :highlight, 'product_' << @line.product_id.to_s, :duration => 1

來源

2010-10-29 sethvargo

我敢肯定，這裏的問題是，當你的頁面加載的第一次，你使用了Rails UJS JavaScript庫（默認爲原型，或jQuery等）將監聽器綁定到錨點（鏈接）元素的onclick事件。但是，當您動態更新頁面（通過ajax）時，新的定位標記不會收到此綁定，因爲UJS庫只在第一次加載頁面時才執行。如果你正在使用jQuery爲您UJS你應該考慮設在jQuery API docs

描述的jQuery.live（）事件處理附件從API如下：

說明：將處理程序到事件適用於與當前選擇器現在和未來匹配的所有元素。

具體來說，你應該給將要接受AJAX加載內容的ID，讓我們說的「購物車鏈接」的股利，再加入一些javascript類似於下面的頁面：

$('#cart-links a').live('click', function() { 
    // make your AJAX calls here 
});

我如果這是你正在使用的原型，那麼m不知道是否有Prototype等價物。

進一步我已經進入了JavaScript和Rails，我越發覺到很多Rails的JavaScript幫助者實際上使JavaScript開發和AJAX處理更加困難，我傾向於使用原始jQuery。

祝你好運！

來源

2010-10-29 03:41:30

我同意帕特里克，當DOM加載時你可能會綁定，所以任何新添加的元素都不會被綁定。如果您使用的JavaScript（即Prototype）沒有像jQuery的live（）這樣的功能，您可以將綁定邏輯封裝在一個解除綁定然後重新綁定的函數中（您可能希望爲該事件命名空間，取消綁定任何其他處理程序，但我不確定Prototype是否支持命名空間事件），然後可以在插入新元素時調用該函數。或者，您可以將綁定與新創建的元素分開，而不是綁定到具有該類名稱或標記名稱的每個元素。

和Patrick一樣，我也更喜歡使用原始的jQuery。通過這種方式，您不必瞭解rails.js所做的工作，並且可以解決不符合要求的情況。作爲一名開發人員，你應該知道你想要你的JavaScript做什麼，並做到這一點。如果您更喜歡使用Prototype，那麼您仍然應該製作自己的rails.js，但在我看來，jQuery確實更好。

來源

2010-11-01 18:28:53 Samo

我同意... jQuery更好，但我想嘗試RJS/proto，因爲我在看railscasts，並且它們看起來很容易 – sethvargo 2010-11-14 00:50:53

rails link_to：遠離ajax加載的內容

回答

相關問題