[英]Twitter Bootstrap Rails button dropdown no responding to AJAX
I have a Rails 4 app that is using Bootstrap. 我有一个正在使用Bootstrap的Rails 4应用程序。 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:
页面中的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>
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
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. 因为在“ format.js”之后没有任何内容,所以Rails应该自动执行一个与.js.erb之后的方法同名的文件。 so I have a in_service.js.erb and an out_service.js.erb file.
所以我有一个in_service.js.erb和一个out_service.js.erb文件。 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');
});
I don't get any errors on the JS console in the browser when I click on the drop down links. 单击下拉链接时,在浏览器的JS控制台上没有出现任何错误。 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:
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)
So it's actually "rendering" the JS file but the page never changes. 因此,它实际上是在“呈现” JS文件,但是页面永远不会改变。 I've tried many different jquery selectors to see if it was a problem with that, but came up with the same results.
我尝试了许多不同的jquery选择器,以查看是否存在问题,但得出了相同的结果。 My application.js file has these includes:
我的application.js文件包括:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-datepicker
//= require server-time
//= require jquery-table
//= require_tree .
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.
我在JS方面很糟糕,对它的理解还很初级。 Thanks.
谢谢。
Edit ---- 编辑----
So I made the changes suggested by HAWK but something about it doesn't work with my setup. 因此,我进行了HAWK建议的更改,但与此相关的某些设置不适用于我的设置。 I get this in the Chrome JS console:
我在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
and in the web server log: 并在Web服务器日志中:
Completed 400 Bad Request in 10ms
ActionController::ParameterMissing - param not found: tool:
It's as if it is no longer getting the :tool parameter which is required as I am on Rails 4 using strong params. 就像不再使用我在Rails 4上使用强参数一样,它不再需要:tool参数。 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.
一切的数据方面都在我的旧代码下运行,唯一没有发生的是元素上css样式的javascript更新。 I rolled my code back to the original and when I click on the drop down menu the web server shows:
我将代码回滚到原始代码,然后单击下拉菜单,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)
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: 我什至更改了.js.erb文件,以按ID直接定位按钮之一,以确保它不是选择器问题:
$('#btn7').addClass('.btn-success').removeClass('.btn-warning');
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. 我看到了有关引导程序或Rails的某个链接,这些链接使JS无法从引导程序中执行,但下拉菜单仍在尝试查找该链接。 Thanks for all the help so far.
感谢到目前为止的所有帮助。
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
. 关键在于降低工作流程
:remote => true
连接到控制器中的toggle_in_service
方法,该方法随后调用toggle_in_service.js.erb
文件,该文件最终调用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. 我还发现,在Bootstrap中工作时,最好将现有的
<div>
为替换目标,而不是将一段bootstrap代码包装在另一个div中。 Not sure on that but it seemed to matter. 不确定,但这似乎很重要。 Here is the code that worked:
这是起作用的代码:
dashboard.html.erb view snippet: dashboard.html.erb视图片段:
<% 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>
This creates a Bootstrap dropdown menu attached to a button that is color coded by the status of the tool. 这将创建一个Bootstrap下拉菜单,该菜单附加到按工具状态进行颜色编码的按钮上。
The first link in the dropdown menu is a remote ajax call to the toggle_in_service
controller, passing the tool.id paramter. 下拉菜单中的第一个链接是对
toggle_in_service
控制器的远程ajax调用,传递了tool.id参数。 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
The boolean value for tool.in_service gets flipped and then calls toggle_in_service.js.erb
: 翻转tool.in_service的布尔值,然后调用
toggle_in_service.js.erb
:
<% btn_id = "btn#{@tool.id}" %>
$('#<%=btn_id%>').html('<%= escape_javascript(render :partial => "toggle_button") %>');
Which does an AJAX render of the _toggle_button.html.erb
partial: AJAX渲染
_toggle_button.html.erb
部分:
<% 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>
Works great! 很棒! The entire
div
for the dropdown and the button get updated by AJAX. 下拉列表和按钮的整个
div
由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.
我在网上和Stack Overflow上搜索了很多小时,但从未找到我需要的东西。 I did some reading up on Rails AJAX to figure out what I was doing wrong.
我在Rails AJAX上进行了一些阅读,以弄清我做错了什么。
Probably this is not answer, but I will give my suggestions. 可能这不是答案,但我会给出建议。 First of all you don't need two actions making same things.
首先,您不需要做相同事情的两个动作。 Try this
尝试这个
Controller 调节器
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 view add parameters to query 在视图中添加参数进行查询
View 视图
<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>
Don't need to listen ajax bindings 不需要听ajax绑定
js.erb js.erb
<% if @success %>
$('.btn').addClass('.btn-success').removeClass('.btn-warning');
<% else %>
$('.btn').addClass('.btn-warning').removeClass('.btn-success');
<% end %>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.