Displaying errors when a Twitter Bootstrap modal window contains a Rails form helper [closed]

Answer 1

As stated by @wanghq (and in part by @miked), I think the best way is to use AJAX to render the html in the modal and submit the form data. This way, all the logic is delegated to server side, using JS only for the effects and keeping views clean (no helpers nor logic involved inside views).

with this solution is that you can gracefully degrade when JS doesn't work on the client by using same controller action to render the form. A simple example:

def new
  @user = User.new
  # some stuff...
  render :handler => 'haml', :layout => !request.xhr?
end

# similar logic should be used for #create action

for the (d)html part, you might use ruby to detect if it should be displayed because of errors. I mean something like this (you might write an helper if needed):

#request-invite.modal{:style => "display: #{ @user.errors.any? ? 'block' : 'none' };"}

as a side note, using simple_form 2.0.x, you'll get twitter-bootstrap markup support (I mean, it will generate bootstrap-friendly markup for your forms). In this way, you'll DRY some logic inside templates (eg: checking @user.errors to diplay error messages)

in this way, you should not need JS to do checks ;)

my 2cents ;-)

Answer 2

I want to offer another option. The way you use should work, but why not just use AJAX to show the error msg when there is any error. What the response JS does is to add the extra styles to show the error msg.

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.

Take a look at http://www.twitmark.me/. Try sign in with twitter. Input a faked invitation code and see what the error looks like. Is this a better solution?

Answer 3

I might be misunderstanding the problem, but from what I can see, your error_explanation div isn't hidden (display:none) when the modal loads, it doesn't exist because it's conditioned in the if @user.errors.any? block. Therefore it won't matter what javascript you throw at it, it's not there.

For starters, try:

.modal-body
  #error_explanation
    - if @user.errors.any?
      %ul
        - @user.errors.full_messages.each do |msg|
          %li= msg

this way, the div will exist and the ul will only show items if their are errors to display.

Answer 4

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.

Answer 5

Why do you need jQuery? Why not just use the conditional you already have?

This code sucks, you could probably clean it up (move it into helper or something), but you'll get the idea.

- def display?; @user.errors.any? ? "block;" : "none;"; end;
#request-invite.modal{:style => "display: " + display? }