Question

I’m asking about using a Twitter Bootstrap modal window with a Rails form helper and displaying form validation error messages. I’m using Twitter Bootstrap 2.0 with Rails 3.2.

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.

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.

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");
  }
})

and also:

$('document').ready(function() {
  if ($('#error_explanation').length > 0) {
    $("#request_invite").modal('toggle');
  }
})

What do I need to do to display the modal window or toggle it open when there’s an error message present?

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

Answer 1

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.