Submit button not working in simple_form inside modal dialog

Question

Recently I finished a Rails application that was working fine but then I tried to switch to a Unicorn server to take advantage of the worker processes. I deployed it and something broke so I returned to the old Webrick server, but something along the way went wrong because when I tried to deploy it again my submit buttons of my forms inside Bootstrap's modals didn´t worked. They did nothing when clicked. Note that this happens only for submit buttons of forms inside bootstrap modals.

Here's the code of one form as an example:

<div>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="text-center">Nuevo Usuario</h3>
<div class="modal-body">
    <%= simple_form_for(@user) do |f| %>
    <%= f.error_notification %>
    <%= display_base_errors resource %>
    <%= f.input :name, :autofocus => true, :label => false, :placeholder => 'Nombre', :input_html => { :class => "input-block-level" } %>
    <%= f.input :email, :label => false, :placeholder => 'Email', :input_html => { :class => "input-block-level" } %>
    <%= f.input :role_ids, :collection => Role.all, :label => false, :prompt => "Selecciona un rol", :input_html => { :class => "input-block-level" } %>
</div>
<div class="modal-footer">
      <%= f.button :submit, "Crear", :class => 'btn-info'  %>
    <% end %>
    <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
</div>

This is called via AJAX inside a div such as:

<div id="user-modal" class="modal hide fade modal-medium"></div>

I have looked everywere for a solution and found nothing. Can someone help me? It is a Rails 3.2 app with bootstrap 2.3 and simple_form gem for forms.

EDIT: I recently discover this only occurs in Chrome and Firefox, but in Safari works just fine

Answer 1

I had the same problem. After some analysis with firebug I discovered that the reason that it won't work is that the browser automatically renders the tag, in our cases too early.

How to fix it Pretty simple, move the <%= simple_form_for(@user) do |f| %> to the beginning, like:

<%= simple_form_for(@user) do |f| %>    
<div>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 class="text-center">Nuevo Usuario</h3>
    <div class="modal-body">

        <%= f.error_notification %>
        <%= display_base_errors resource %>
        <%= f.input :name, :autofocus => true, :label => false, :placeholder => 'Nombre', :input_html => { :class => "input-block-level" } %>
        <%= f.input :email, :label => false, :placeholder => 'Email', :input_html => { :class => "input-block-level" } %>
        <%= f.input :role_ids, :collection => Role.all, :label => false, :prompt => "Selecciona un rol", :input_html => { :class => "input-block-level" } %>
    </div>
    <div class="modal-footer">
          <%= f.button :submit, "Crear", :class => 'btn-info'  %>
        <% end %>
        <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
    </div>