使用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

回答

相关问题