Forms not submitting inside Bootstrap Modal with Turbolinks turned on #322

kartikluke opened this Issue Jan 2, 2014 · 2 comments


None yet

2 participants

I've made forms to be submitted in modals provided by Bootstrap 3.0.
However the forms only submit when I refresh the page and not when the pages get turbolinked. On turbolinking I can keep clicking the submit button and nothing happens. This only happens in production for some reason.

Removing turbolinks fixes the problem but I want the speed gains from it.

One issue I think it could be is that the modals are initially display:none; so it may be an issue that the forms are not loaded properly.

I'll test form submissions without the modals but it's a must for the application I'm making.


def create
@deal = = @team
@deal.user_id =

respond_to do |format|
    format.html { redirect_to team_deals_path(@team), notice: 'Deal was successfully created.' }
    format.json { render action: 'show', status: :created, location: @deal }
    @deals =
    format.html { render action: 'index' }
    format.json { render json: @deal.errors, status: :unprocessable_entity }

I have the form located in the index action itself.


<div id="dealModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">New Deal</h4>
  <div class="modal-body">
    <%= simple_form_for([, @deal]) do |f| %>
      <%= f.error_notification %>

      <div class="form-inputs">
        <%= f.input :person_id do %>
          <%= f.input_field :person_id, :collection => @team.people, class: "col-lg-10" %>
          <%= link_to content_tag(:i, nil, class: 'glyphicon-plus'), new_team_person_path, type: 'button', class: 'btn btn-success col-lg-2' %>
        <% end %>
        <%= f.input :organization_id do %>
          <%= f.input_field :organization_id, :collection => @team.organizations, class: "col-lg-10" %>
          <%= link_to content_tag(:i, nil, class: 'glyphicon-plus'), new_team_organization_path, type: 'button', class: 'btn btn-success col-lg-2' %>
        <% end %>

        <%= f.input :title %>
        <%= f.input :value %>
        <%= f.input :currency_id, :include_blank => false , :collection => Currency.all,  label_method: lambda { |obj| t("#{obj.extension}") } %>

        <%= f.input :start_date, :as => :datetime_picker, input_html: {class: "deal_start_date"} %>
        <%= f.input :close_date,:as => :datetime_picker, input_html: {class: "deal_close_date"} %>

        <%= f.input :status, collection:['Pending', 'Won','Lost'], :include_blank => false %>
        <%= f.input :phone %>
        <%= f.input :visibility_id, collection: Visibility.all,:include_blank => false %>
        <%= f.input :email %>
        <%= f.input :stage_id, :collection => @team.stages, :include_blank => false %>
  <div class="modal-footer">
    <div class="form-actions">
      <%= f.button :submit, class:"btn btn-primary", remote: true, method: :post %>
<% end %>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">

if(<%= @modal %>) {

The script is just used to keep the modal open in case there are validation errors in the form.

reed commented Jan 10, 2014

Your markup is invalid. Simplified, you have:

<div class="modal-body">
<div class="modal-footer">
  <input type="submit" />

You should move the opening form tag to just below the opening tag for the modal-content div.

@reed reed closed this Jan 21, 2014
reed commented Jan 31, 2014

That commit (e69bead) should reference issue 332, not 322.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment