Twitter Bootstrap Rails按钮下拉列表没有响应AJAX [英] Twitter Bootstrap Rails button dropdown no responding to AJAX

问题描述

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

I have a Rails 4 app that is using Bootstrap. I am creating a dashboard page that shows buttons that are color coded to represent the status of the tool it represents. The HTML in the page looks like this:

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

链接的两个方法如下所示:

The two methods linked to look like this:

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文件.他们看起来像这样:

Since there is nothing after the "format.js" Rails should automatically execute a file that has the same name as the method followed by .js.erb. so I have a in_service.js.erb and an out_service.js.erb file. They look like this:

$('.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服务器日志显示以下内容:

I don't get any errors on the JS console in the browser when I click on the drop down links. The controller part is working perfect. If I reload the page it will show the button with the modified color. The rails server log shows this:

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文件包含以下内容:

So it's actually "rendering" the JS file but the page never changes. I've tried many different jquery selectors to see if it was a problem with that, but came up with the same results. My application.js file has these includes:

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

我搜索了几乎所有我能想到的东西，但仍然感到困惑.我在JS上很糟糕，对它的理解还很初级.谢谢.

I've searched just about everything I can think of and am still stumped. I am terrible at JS and my understanding of it is pretty rudimentary. Thanks.

编辑----

因此，我进行了HAWK建议的更改，但有关此设置的某些设置不起作用.我在Chrome JS控制台中获得了此信息:

So I made the changes suggested by HAWK but something about it doesn't work with my setup. I get this in the Chrome JS console:

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服务器日志中:

and in the web server log:

Completed 400 Bad Request in 10ms

ActionController::ParameterMissing - param not found: tool:

这就像不再使用我在Rails 4上使用强参数所需要的:tool参数一样.一切的数据方面都在我的旧代码下运行，唯一没有发生的是元素上css样式的javascript更新.我将代码回滚到原始代码，然后单击下拉菜单，Web服务器显示:

It's as if it is no longer getting the :tool parameter which is required as I am on Rails 4 using strong params. The data side of everything was working under my old code, the only thing that wasn't happening was the javascript update of the css style on the element. I rolled my code back to the original and when I click on the drop down menu the web server shows:

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直接定位按钮之一，以确保它不是选择器问题:

I even changed the .js.erb files to target one of the buttons directly by ID to make sure it wasn't a selector problem:

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

我看到一个有关引导程序或Rails的链接，该链接阻止JS在引导程序中执行，但仍在尝试查找该链接.感谢到目前为止的所有帮助.

I saw a link about something in bootstrap or rails stopping the JS from ever being executed in a bootstrap drop down but am still trying to find the link. Thanks for all the help so far.

推荐答案

所以我终于弄清楚了这一点.关键在于降低工作流程::remote => true连接到控制器中的toggle_in_service方法，然后调用toggle_in_service.js.erb文件，该文件最后调用toggle_button.html.erb.我还发现，在Bootstrap中工作时，最好将现有的<div>定位为替换对象，而不是将一段bootstrap代码包装在另一个div中.不确定，但这似乎很重要.这是起作用的代码:

So I finally figured this one out. The key was having the workflow down: :remote => true connects to the toggle_in_service method in the controller that then calls the toggle_in_service.js.erb file which finally calls toggle_button.html.erb. I also found that when working in Bootstrap it's probably best to try and target an existing <div> for replacement rather than wrap a piece of bootstrap code in another div. Not sure on that but it seemed to matter. Here is the code that worked:

dashboard.html.erb视图片段:

dashboard.html.erb view snippet:

 <% 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下拉菜单，该菜单附加到按工具状态进行颜色编码的按钮上.

This creates a Bootstrap dropdown menu attached to a button that is color coded by the status of the tool.

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

The first link in the dropdown menu is a remote ajax call to the toggle_in_service controller, passing the tool.id paramter. The controller method looks like:

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:

The boolean value for tool.in_service gets flipped and then calls toggle_in_service.js.erb:

<% btn_id = "btn#{@tool.id}" %>

$('#<%=btn_id%>').html('<%= escape_javascript(render :partial => "toggle_button") %>');

对_toggle_button.html.erb部分进行AJAX渲染:

Which does an AJAX render of the _toggle_button.html.erb partial:

<% 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上进行了一些阅读，以弄清我做错了什么.

Works great! The entire div for the dropdown and the button get updated by AJAX. I'm posting this in case someone looks for something similar. I search many hours on the web and on Stack Overflow, but never found what I needed. I did some reading up on Rails AJAX to figure out what I was doing wrong.

这篇关于Twitter Bootstrap Rails按钮下拉列表没有响应AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！