Twitter Bootstrap Rails 按钮下拉菜单没有响应 AJAX

Question

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

<div class="btn-group">
   <a class="btn custombutton dropdown-toggle btn-success" data-toggle="dropdown" href="#" id="btn0" >
      706-Hydraulic Ram<br> 98061841
   </a>

   <ul class="dropdown-menu">
       <li><a data-method="post" data-remote="true" href="/update_in_service?id=32" id="in_service" rel="nofollow">In Service</a></li>
       <li><a data-method="post" data-remote="true" href="/update_out_service?id=32" id="out_service" rel="nofollow">Out of Service</a></li>
       <li><a href="/tools/32">view Details</a></li>
   </ul>
</div>

链接到的两个方法如下所示：

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

在网络服务器日志中：

Completed 400 Bad Request in 10ms

ActionController::ParameterMissing - param not found: tool:

就好像它不再获得所需的 :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 在 bootstrap 下拉菜单中被执行，但我仍在尝试找到该链接。感谢您迄今为止的所有帮助。

Answer 1

所以我终于想通了。关键是要关闭工作流：:remote => true 连接到控制器中的toggle_in_service 方法，然后调用toggle_in_service.js.erb 文件，该文件最终调用toggle_button.html.erb。我还发现，在 Bootstrap 中工作时，最好尝试将现有的 <div> 替换为目标，而不是在另一个 div 中包装一段引导代码。不确定，但这似乎很重要。这是有效的代码：

dashboard.html.erb 查看sn-p：

 <% status_link = tool.in_service ? "Put Out of Service" : "Put In Service" %>
 <% button_link = "#{tool.location}-#{tool.name.singularize}"+'<br>'+" #{tool.serial}" %>
 <div class="btn-group" id="btn<%= tool.id %>" >

    <a class="btn custombutton dropdown-toggle <%= (tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
      <%=  raw(button_link) %>
    </a>

    <ul class="dropdown-menu">
      <li><%= link_to status_link, toggle_in_service_path(:id => tool.id), :method => :post, :remote => true %></li>
      <li><%= link_to "view Details", tool_path(tool.id) %></li>
    </ul>
 </div>

这会创建一个附加到按钮的 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}"+'<br>'+" #{@tool.serial}" %>
<% status_link = @tool.in_service ? "Put Out of Service" : "Put In Service" %>

<a class="btn custombutton dropdown-toggle <%= (@tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
  <%=  raw(button_link) %>
</a>
<ul class="dropdown-menu">
  <li><%= link_to status_link, toggle_in_service_path(:id => @tool.id), :method => :post, :remote => true %></li>
  <li><%= link_to "view Details", tool_path(@tool.id) %></li>
</ul>

效果很好！下拉列表和按钮的整个 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

在视图中添加参数到查询

查看

<ul class="dropdown-menu">
    <li><a data-method="post" data-remote="true" href="/update_in_service?id=32&in_service=true" id="in_service" rel="nofollow">In Service</a></li>
    <li><a data-method="post" data-remote="true" href="/update_in_service?id=32&in_service=false" id="out_service" rel="nofollow">Out of Service</a></li>
    <li><a href="/tools/32">view Details</a></li>
</ul>

不需要监听 ajax 绑定

js.erb

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