javascript - 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');
});

当我点击下 zipper 接时，我在浏览器的 JS 控制台上没有收到任何错误。 Controller 部分工作完美。如果我重新加载页面，它将显示具有修改后颜色的按钮。 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:

就好像它不再获得我在 Rails 4 上使用强参数时所必需的 :tool 参数。一切的数据方面都在我的旧代码下工作，唯一没有发生的是元素上 css 样式的 javascript 更新。我将代码回滚到原始代码，当我单击下拉菜单时，网络服务器显示:

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 Controller 中的方法，然后调用 toggle_in_service.js.erb最终调用 toggle_button.html.erb 的文件.我还发现，在使用 Bootstrap 时，最好尝试以现有的 <div> 为目标。用于替换而不是将一段 Bootstrap 代码包装在另一个 div 中。不确定，但这似乎很重要。这是有效的代码:

dashboard.html.erb View 片段:

 <% 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 调用 Controller ，传递 tool.id 参数。 Controller 方法如下所示:

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 的 bool 值被翻转然后调用 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 的资料，以找出我做错了什么。