Twitter Bootstrap Rails按钮下拉列表没有响应AJAX

我有一个使用Bootstrap的Rails 4应用程序。 我正在创建一个仪表板页面，显示颜色编码的按钮，以表示它所代表的工具的状态。 页面中的HTML如下所示：

  706-Hydraulic Ram
 98061841  
 
In Service
 
Out of Service
 
view Details
 
  

链接的两个方法看起来像这样：

 def in_service @tool.update(:in_service => true) respond_to do |format| format.html { redirect_to(root_path) } format.js end end def out_service @tool.update(:in_service => false) respond_to do |format| format.html { redirect_to(root_path) } format.js end end 

由于“format.js”之后没有任何内容，Rails应该自动执行一个与.js.erb后面的方法同名的文件。 所以我有一个in_service.js.erb和一个out_service.js.erb文件。 它们看起来像这样：

 $('.in_service').bind('ajax:success', function() { $(this).closest('.btn').addClass('.btn-success').removeClass('.btn-warning'); }); $('.out_service').bind('ajax:success', function() { $(this).closest('.btn').addClass('.btn-warning').removeClass('.btn-success'); }); 

当我点击下拉链接时，浏览器中的JS控制台上没有任何错误。 控制器部分工作正常。 如果我重新加载页面，它将显示带有修改颜色的按钮。 rails服务器日志显示：

 SQL (8.3ms) UPDATE "tools" SET "in_service" = $1, "updated_at" = $2 WHERE "tools"."id" = 32 [["in_service", false], ["updated_at", Wed, 28 Aug 2013 22:28:11 PDT -07:00]] (1092.8ms) COMMIT Rendered tools/out_service.js.erb (0.6ms) Completed 200 OK in 1383ms (Views: 259.3ms | ActiveRecord: 1104.3ms) 

所以它实际上是“渲染”JS文件，但页面永远不会改变。 我已经尝试了许多不同的jquery选择器来查看它是否有问题，但得出了相同的结果。 我的application.js文件包括：

 //= require jquery //= require jquery_ujs //= require bootstrap //= require bootstrap-datepicker //= require server-time //= require jquery-table //= require_tree . 

我搜索了我能想到的所有东西，但仍然难倒。 我在JS很糟糕，我对它的理解非常简陋。 谢谢。

编辑—-

所以我做了HAWK建议的更改，但是它的某些内容与我的设置无关。 我在Chrome JS控制台中得到了这个：

 POST http://localhost:3000/update_in_service?btn_id=btn0&id=29&in_service=false 500 (Internal Server Error) jquery.js?body=1:8725 send jquery.js?body=1:8725 jQuery.extend.ajax jquery.js?body=1:8155 $.rails.rails.ajax jquery_ujs.js?body=1:73 $.rails.rails.handleRemote jquery_ujs.js?body=1:149 (anonymous function) jquery_ujs.js?body=1:299 jQuery.event.dispatch jquery.js?body=1:5117 elemData.handle jquery.js?body=1:4788 

并在Web服务器日志中：

 Completed 400 Bad Request in 10ms ActionController::ParameterMissing - param not found: tool: 

这就好像它不再获得：工具参数，因为我在Rails 4上使用强参数。 一切的数据方面都在我的旧代码下工作，唯一没有发生的是元素上的css样式的javascript更新。 我将代码恢复到原始状态，当我点击下拉菜单时，Web服务器显示：

 Started POST "/update_in_service?id=29" for 127.0.0.1 at 2013-08-29 10:28:11 -0700 Processing by ToolsController#in_service as JS Parameters: {"id"=>"29"} Tool Load (0.5ms) SELECT "tools".* FROM "tools" WHERE "tools"."id" = $1 LIMIT 1 [["id", "29"]] (0.2ms) BEGIN SQL (0.7ms) UPDATE "tools" SET "in_service" = $1, "updated_at" = $2 WHERE "tools"."id" = 29 [["in_service", true], ["updated_at", Thu, 29 Aug 2013 10:28:11 PDT -07:00]] (1245.5ms) COMMIT Rendered tools/in_service.js.erb (0.6ms) Completed 200 OK in 1266ms (Views: 6.1ms | ActiveRecord: 1249.5ms) 

我甚至更改了.js.erb文件，直接通过ID定位其中一个按钮，以确保它不是选择器问题：

 $('#btn7').addClass('.btn-success').removeClass('.btn-warning'); 

我看到一个关于bootstrap或rails中某些东西的链接阻止了JS在引导程序下拉中执行，但仍在尝试查找链接。 感谢目前为止所有的帮助。

Answer 1

所以我终于想出了这一个。 关键是让工作流程toggle_in_service :remote => true连接到控制器中的toggle_in_service方法，然后调用最终调用toggle_button.html.erb的toggle_in_service.js.erb文件。 我还发现，在Bootstrap中工作时，最好尝试将目标

作为替换目标而不是将一段引导代码包装在另一个div中。 不确定，但似乎很重要。 这是有效的代码：

dashboard.html.erb视图片段：

  <% status_link = tool.in_service ? "Put Out of Service" : "Put In Service" %> <% button_link = "#{tool.location}-#{tool.name.singularize}"+'
'+" #{tool.serial}" %> 
  <%= raw(button_link) %>  
 
<%= link_to status_link, toggle_in_service_path(:id => tool.id), :method => :post, :remote => true %>
 
<%= link_to "view Details", tool_path(tool.id) %>
 
  

这将创建一个Bootstrap下拉菜单，该菜单附加到按钮，该按钮由工具的状态进行颜色编码。

下拉菜单中的第一个链接是对toggle_in_service控制器的远程ajax调用，传递tool.id参数。 控制器方法如下：

 def toggle_in_service status_change = @tool.in_service ? false : true @tool.update(:in_service => status_change) respond_to do |format| format.html { redirect_to(@tool) } format.js end end 

将触发tool.in_service的布尔值，然后调用toggle_in_service.js.erb ：

 <% btn_id = "btn#{@tool.id}" %> $('#<%=btn_id%>').html('<%= escape_javascript(render :partial => "toggle_button") %>'); 

这是_toggle_button.html.erb部分的AJAX渲染：

 <% button_link = "#{@tool.location}-#{@tool.name.singularize}"+'
'+" #{@tool.serial}" %> <% status_link = @tool.in_service ? "Put Out of Service" : "Put In Service" %>  <%= raw(button_link) %>  
 
<%= link_to status_link, toggle_in_service_path(:id => @tool.id), :method => :post, :remote => true %>
 
<%= link_to "view Details", tool_path(@tool.id) %>
  

效果很好！ 下拉列表的整个div和按钮由AJAX更新。 我发布这个以防有人寻找类似的东西。 我在网上和Stack Overflow上搜索了很多个小时，但从未找到我需要的东西。 我做了一些关于Rails AJAX的阅读，以弄清楚我做错了什么。

Answer 2

可能这不是答案，但我会提出我的建议。 首先，你不需要两个动作做同样的事情。 试试这个

调节器

 def in_service @tool.update(:in_service => params[:in_service]) @success = params[:in_service] respond_to do |format| format.html { redirect_to(root_path) } format.js end end 

在视图中添加要查询的参数

视图

 
 
In Service
 
Out of Service
 
view Details
  

不需要监听ajax绑定

js.erb

 <% if @success %> $('.btn').addClass('.btn-success').removeClass('.btn-warning'); <% else %> $('.btn').addClass('.btn-warning').removeClass('.btn-success'); <% end %>