我想询问如何在Rails表单帮助程序中使用Twitter Bootstrap模态窗口,并显示表单验证错误消息。我正在使用Rails 3.2和Twitter Bootstrap 2.0。
我在Twitter Bootstrap模态窗口中放置了一个表单。页面上有一个按钮,用于打开模态窗口并显示表单。一切都很好,但是当表单提交时出现错误,由于表单位于(最初未显示的)模态窗口内,因此无法看到错误消息。
我需要使用jQuery来测试表单是否包含Rails错误消息,并在渲染页面时覆盖“display:none;”样式(或切换模态窗口以显示)。
我尝试将以下代码添加到我的assets/javascripts/application.js文件中,但它不起作用:
而且:
我在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