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？

EDIT1：

原来我遇到了404错误。我删除了＆＃39; my_controller / home＆＃39;由于这是root_path，它试图将整个主页加载到＃list-container div。

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

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

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

EDIT2：

确定。我以前没有在routes.rb文件中路由获取请求，现在我可以使用：

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

现在只有陷阱，div中的所有东西都消失了，整个事情都是空白的。我不确定是什么造成的。

EDIT3：

我几乎得到了它。我在＃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' }

第三，我没有看到任何遥控器：true，在哪里？

使用jquery和ajax

1 个答案: