当Twitter Bootstrap模态窗口包含Rails表单帮助程序时显示错误 [英] Displaying errors when a Twitter Bootstrap modal window contains a Rails form helper

问题描述

我要询问的是将Twitter Bootstrap模态窗口与Rails表单帮助程序一起使用，并显示表单验证错误消息.我正在使用带有Rails 3.2的Twitter Bootstrap 2.0.

我在Twitter Bootstrap模态窗口中有一个表单.页面上有一个按钮可以打开模式窗口并显示表单.一切都很好，除非表单提交有错误，否则会显示页面，并且错误消息也不会出现，因为表单位于(最初未显示的)模式窗口内.

I've got a form inside a Twitter Bootstrap modal window. There's a button on the page to open the modal window and display the form. All good, except when the form is submitted with errors, the page is displayed and error messages can't be seen because the form is inside the (initially undisplayed) modal window.

我需要使用jQuery来测试表单是否包含Rails错误消息并覆盖"display:none;"页面呈现时的样式(或切换模式窗口以显示).

I need to use jQuery to test if the form contains a Rails error message and override the "display: none;" style (or toggle the modal window to display) when the page is rendered.

我尝试将以下代码添加到我的asset/javascripts/application.js文件中，但是它不起作用:

I've tried adding the following code to my assets/javascripts/application.js file but it doesn't work:

$('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)中显示表单的代码:

Here's the code that displays the form inside the Twitter Bootstrap modal window (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.

Looks like a typo? Your div in Haml has the ID request-invite (with a dash). However, your jQuery is looking for an ID with an underscore.

这篇关于当Twitter Bootstrap模态窗口包含Rails表单帮助程序时显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！