我有一个使用 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
并在 Web 服务器日志中:
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 下拉菜单中被执行,但我仍在尝试找到该链接。感谢到目前为止的所有帮助。