当Twitter Bootstrap模式窗口包含Rails表单助手时显示错误
我问的是使用带有Rails表单助手的Twitter Bootstrap模式窗口并显示表单validation错误消息。 我正在使用Twitter Bootstrap 2.0和Rails 3.2。
我在Twitter Bootstrap模式窗口中有一个表单。 页面上有一个按钮，用于打开模态窗口并显示表单。 一切都很好，除非提交表单时出现错误，显示页面并且无法看到错误消息，因为表单位于（最初未显示的）模式窗口内。
我需要使用jQuery来测试表单是否包含Rails错误消息并覆盖“display：none;” 呈现页面时样式（或切换要显示的模态窗口）。
我已经尝试将以下代码添加到我的assets / javascripts / application.js文件中，但它不起作用：
$('document').ready(function() { if ($('#error_explanation').length > 0) { $("#request_invite").css("display", "block"); } }) 并且：
$('document').ready(function() { if ($('#error_explanation').length > 0) { $("#request_invite").modal('toggle'); } })
当出现错误信息时，我需要做什么来显示模态窗口或将其打开？
这是在Twitter Bootstrap模式窗口（Haml）中显示表单的代码：
#request-invite.modal{:style => "display: none;"} = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| .modal-header %a.close{"data-dismiss" => "modal"} × %h3 Request Invitation .modal-body - if @user.errors.any? #error_explanation %ul - @user.errors.full_messages.each do |msg| %li= msg %p = f.label :email %br/ = f.email_field :email .modal-footer = f.submit "Request Invitation", :class => "btn.btn-success" %a.btn{"data-dismiss" => "modal", :href => "#"} Close #romance-copy{:style => "text-align: center; margin-top: 100px"} %h2 Want in? #call-to-action{:style => "text-align: center; margin-top: 100px"} %a.btn.btn-primary.btn-large{"data-toggle" => "modal", :href => "#request-invite"} Request invite
看起来像拼写错误？ 你在Haml的div有ID请求 – 邀请（带破折号）。 但是，您的jQuery正在寻找带下划线的ID。
我想提供另一种选择。 您使用的方式应该有效，但为什么不在发生任何错误时使用AJAX显示错误消息。 JS的响应是添加额外的样式来显示错误消息。
我需要使用jQuery来测试表单是否包含Rails错误消息并覆盖“display：none;” 呈现页面时样式（或切换要显示的模态窗口）。
看看http://www.twitmark.me/ 。 尝试使用twitter登录。 输入伪造的邀请代码，看看错误是什么样的。 这是更好的解决方案吗？
正如@wanghq（以及部分@miked）所述，我认为最好的方法是使用AJAX在模态中呈现html并提交表单数据。 这样，所有逻辑都被委托给服务器端，使用JS仅用于效果并保持视图干净（视图内部没有帮助者和逻辑）。
使用此解决方案的是，当JS无法在客户端上运行时，您可以通过使用相同的控制器操作来呈现表单来优雅地降级。 一个简单的例子：
def new @user = User.new # some stuff... render :handler => 'haml', :layout => !request.xhr? end # similar logic should be used for #create action
对于（d）html部分，您可以使用ruby来检测是否应该因错误而显示它。 我的意思是这样的（如果需要你可以写一个帮手）：
#request-invite.modal{:style => "display: #{ @user.errors.any? ? 'block' : 'none' };"}
作为附注，使用simple_form 2.0.x，您将获得twitter-bootstrap标记支持（我的意思是，它将为您的表单生成引导程序友好的标记）。 通过这种方式，您将在模板中干掉一些逻辑（例如：检查@ user.errors以显示错误消息）
这样，你不应该需要JS来做检查;）
我的2cents 😉
我可能误解了这个问题，但从我所看到的，当模态加载时，你的error_explanation div没有被隐藏（display：none），它不存在，因为它在if @ user.errors.any中被限制？ 块。 因此，你抛出什么javascript并不重要，它不存在。
对于初学者，请尝试：
.modal-body #error_explanation - if @user.errors.any? %ul - @user.errors.full_messages.each do |msg| %li= msg
这样，div就会存在，ul只会显示项目，如果它们是要显示的错误。
你为什么需要jQuery？ 为什么不使用你已有的条件？
这段代码很糟糕，你可能会把它清理干净（把它移到帮手或其他东西），但你会明白这个想法。
- def display?; @user.errors.any? ? "block;" : "none;"; end; #request-invite.modal{:style => "display: " + display? }