使用 jquery 和 ajax 刷新 Rails 中的单个 div

Question

我正在尝试允许用户单击按钮并将项目添加到列表中。而不是再次加载整个页面，我只想刷新列表。截至目前，当点击添加按钮时，会在lists_controller中调用add_item方法：

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 数组中。

在包含列表 (#list-container) 的 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？

编辑1：

原来我遇到了 404 错误。我删除了“my_controller/home”，因为这是 root_path，它试图将整个主页加载到 #list-container div 中。

当我尝试将 id 添加到加载函数时：

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

当我单击一个按钮时，我仍然会在 div 中呈现整个主页。

编辑2：

好的。我之前没有在我的 routes.rb 文件中路由 get 请求，现在我可以使用：

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

现在只有 catch，div 中的所有内容都消失了，整个内容都是空白的。我不确定是什么原因造成的。

编辑3：

我几乎明白了。我在#list-container 中嵌套了一个 div.list 并将 jquery 更改为：

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

现在，当我单击按钮将项目添加到列表时，该项目已添加。虽然有挂断。如果我尝试添加另一个项目，第二次点击会覆盖第一次。例如，如果我最初加载页面时有 7 项，我可以添加第 8 项，但此时我只能更改第 8 项。

直到我刷新页面，第8项才被保存，我可以添加第9项。

Answer 1

从相应控制器的相应操作中渲染 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' }

第三，我没有看到任何遥控器：真的，在任何地方？