使用jquery和ajax刷新rails中的單個div

我試圖讓用戶點擊一個按鈕並將一個項目添加到列表中。而不是再次加載整個頁面，我只想刷新列表。截至目前，被點擊添加按鈕時，該方法add_item方法被稱爲在lists_controller：使用jquery和ajax刷新rails中的單個div

lists_controller.rb：

def add_item 
    @product = Product.find(params[:product_id]) 
    @list = params[:list] 

    if @list.nil? 
     @list = [] 
    end 

    @list.append @product.name 
    session[:active_list] = @list 

    respond_to do |format| 
     format.js 
    end 
    end

正確的產品標題被附加到陣列@list。

在包含列表的div（＃列表容器），我有：

<div class="col-md-3" id="list-container"> 
    <h3>List:</h3> 
    <ol> 
     <% @list.each do |item| %> 
     <li><%= item %></li> 
     <% end %> 
    </ol> 
    <%= button_to 'Add to List', { controller: "lists", action: "add_item", params: { product_id: product.id, list: @list } }, remote: true, class: 'btn btn-primary add-item-btn' %>

我用下面是單擊按鈕時

add_item.js.erb

// Clear active status from pressed button 
$(".add-item-btn").blur() 
$('#list-container').load('/my_controller/home #list-container')

刷新div。

當我點擊時，沒有任何反應。沒有項目被添加到列表中，並且頁面保持不變。如果我刷新頁面，我看到該項目已被添加到列表中。

我不能簡單地附加到div，因爲我有一個結帳按鈕，當頁面加載時位於最後一項下。如果我追加，所有未來的項目都添加到這個按鈕下。

有沒有辦法渲染那個div？

EDIT1：

原來我得到一個404錯誤。我刪除了'my_controller/home'，因爲這是root_path，它試圖將整個主頁加載到＃list-container div中。

當我嘗試添加了ID負載功能：

$('#list-container').load('#list-container')

我仍然得到整個主頁正在專區內呈現，當我點擊一個按鈕。

EDIT2：

確定。我以前是沒有的，我的routes.rb文件傳送GET請求，我現在可以使用：

$('#list-container').load('/my_controller/home #list-container')

唯一的缺點是現在，那是在div一切都過去了，整個事情是空白。我不確定是什麼原因造成的。

EDIT3：

我幾乎得到了它。我嵌套在＃列表容器div.list，改變了jQuery來：

$('#list-container').load('/static_pages/home #list-container .list')

現在，當我點擊按鈕將項目添加到列表中，該項目將被添加。雖然有一個hangup。如果我嘗試添加另一個項目，則第二次點擊會覆蓋第一個項目。例如，如果我最初加載頁面時有7個項目，則可以添加項目8，但是此時我只能更改項目8.

直到我刷新頁面，纔會保存項目8我可以添加項目9

來源

2016-11-13 Hutch

*「似乎並沒有被工作」 *是一個非常模糊和不提供信息的問題，聲明說真的沒有告訴我們。顯示的概念是正確的，所以你需要隔離什麼部分不工作 – charlietfl

什麼都沒有發生。該頁面保持不變。我會更詳細地更新這個問題。 – Hutch

檢查瀏覽器開發工具網絡中的實際請求以獲取線索（狀態和響應主體）。另外，是否有更多的服務器端輸出比顯示的更多？嘗試刪除URL中的'＃list-container'，看看會發生什麼。另外向ajax添加一個錯誤處理程序（load（）） – charlietfl

從相應的控制器對應的動作渲染add_item.js.erb。

respond_to do |format| 
format.js { 
render 'add_item.js.erb' 
    } 
end

此外，而不必增加來響應format.js即時通訊控制器，我通常添加直接在routes.rb中爲：

get 'ajax/:model', to: 'ajax#:model', :defaults => { :format => 'json' }

第三，我沒有看到任何遠程：真的，在任何地方？

來源

2016-11-14 00:05:34 Crashtor

我猜我錯過了遙控器：複製和粘貼時爲true。我更新了我的代碼。 – Hutch

在你的routes.rb - 添加此在同一行的領型＃方法add_item（或你有什麼那裏）用逗號sepparated：「：爲=>：LIST_ITEM」，然後按鈕，添加：「：網址=> list_item_path'， - 也button_to是棘手的。您可能想要添加方法：'GET'或方法：'PATCH'。 – Crashtor

不，不抱歉，不適用於修補程序，只適用於更新操作。 – Crashtor

使用jquery和ajax刷新rails中的單個div

回答

相關問題