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

Closed
kartikluke opened this Issue Jan 2, 2014 · 2 comments

Projects

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.

deals_controller.rb

def create
@deal = Deal.new(deal_params)
@deal.team = @team
@deal.user_id = current_user.id

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

I have the form located in the index action itself.

_form.html.erb

<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>
  <div class="modal-body">
    <%= simple_form_for([@deal.team, @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>
  </div>
  <div class="modal-footer">
    <div class="form-actions">
      <%= f.button :submit, class:"btn btn-primary", remote: true, method: :post %>
    </div>
  </div>
<% end %>

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



<script type="text/javascript">

if(<%= @modal %>) {
  $('#dealModal').modal('show')
}
</script>

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

Collaborator
reed commented Jan 10, 2014

Your markup is invalid. Simplified, you have:

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

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
Collaborator
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