Bootstrap 4 Modal form in Rails disables the submit button on ajax refresh

Question

I have a form in a Rails 5.1 app using Bootstrap 4 alpha v6 and when I click on the "Notes" button a modal will pop up and I can enter text, submit a note, and it returns me to the view and closes the modal.

I am polling my partials in the view via ajax every 15s to refresh the div content, however after the initial submission of the note if I wait 15s for the partials to refresh and try to submit another note the modal will pop up again but the create/submit button does nothing.

I'm thinking that on the ajax refresh the modal is unbinding somehow, but I'm not familiar enough with Bootstrap and JS to really solve this quickly. I've been searching stack and google all day and have come up short. Here is my view code:

wheelchair_calls.html.erb

<div id="active">
  <%= render "assigned" %>
</div>

<div id="inactive">
  <%= render "unassigned" %>
</div>


<script>
  $(function() {
    setInterval(function(){
      $.getScript('/calls/wheelchair_calls/?region=<%= params[:region] %>')
    }, 15000);
  });
</script>

wheelchair_calls.js.erb

$("#active").html("<%= escape_javascript render("assigned") %>");
$("#inactive").html("<%= escape_javascript render("unassigned") %>");

_assigned.html.erb (Excerpt of relative code)

<% @assigned.each_with_index do |call, index| %>
<%= link_to "Notes", '#assigned-note-modal', data: {toggle: "modal", target: "#assigned-note-modal#{index}" }, class: 'btn btn-sm btn-primary' %>
<%= render 'shared/assigned_note_modal', call: call, index: index %>
<% end %>

_assigned_note_modal.html.erb

<div id="assigned-note-modal<%= index %>" class="modal hide fade" data-backdrop="">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Call Notes <%= call.incident_number %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= form_for @call_note, url: call_notes_path, method: 'post' do |f| %>
          <%= f.hidden_field :call_id, value: call.id %>
          <%= f.hidden_field :user_id, value: current_user.id %>
          <%= f.text_area :body, size: "60x12" %>
          <%= f.button "Create", class: 'btn btn-info btn-sm' %>
        <% end %>

        <% call.call_notes.each do |cn| %>
          <li><%= cn.body %> | <%= cn.user.username %> | <%= cn.created_at.strftime("%m/%d/%Y-%H:%M") %></li>
        <% end %>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

I've done something similar in an old Rails 3.2 app without Turbolinks obviously and it worked out fine although I was using an old version of bootstrap 2.3.x I believe. The old app works fine with this same type of functionality, but the new app with Rails 5.1, Bootstrap 4 Alpha v6, and Turbolinks disables the submit/create button after the partials refresh.

I tried removing Turbolinks to see if that was an issue and I had no luck. I also tried jquery-turbolinks and it does not have Rails 5 compatibility yet.

I'm heavier in Ruby than I am in JS, so please excuse my lack of knowledge in advance.

Update

When inspecting the form, I see this

<form class="new_call_note" id="new_call_note" action="/call_notes" accept-charset="UTF-8" method="post"></form>

It looks like the form is closing out for some reason so the submit button does not get included. This happens on initial page load and also on ajax refresh.

Answer 1

Found out this was an HTML problem, rendering the form outside of the in my view. So it was closing the form out early. Moved the rendered partials inside of the proper div and tr tag and it works now all the time!

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>Incident #</th>
      <th>Patient</th>
      <th>Nature</th>
      <th>Origin</th>
      <th>Destination</th>
      <th>Unit Assigned</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @assigned.each_with_index do |call, index| %>
      <td><%= call.incident_number %></td>
      <td>John Doe</td>
      <td>Cardiac</td>
      <td>Ben Taub</td>
      <td>St Lukes</td>
      <td><%= link_to "#{call.units.map(&:name).join(", ")}", '#unit-modal', data: {toggle: "modal", target: "#unit-modal#{index}" }, class: 'btn btn-info btn-sm' %></td>
      <td><%= link_to 'Detail', '#', class: 'btn btn-primary btn-sm' %> <%= link_to 'Close', '#', class: 'btn btn-warning btn-sm' %> <%= link_to 'Cancel', '#', class: 'btn btn-danger btn-sm' %> <%= link_to "Status", '#status-modal', data: {toggle: "modal", target: "#status-modal#{index}" }, class: 'btn btn-sm btn-success' %> <%= link_to "Notes", '#assigned-note-modal', data: {toggle: "modal", target: "#assigned-note-modal#{index}" }, class: 'btn btn-sm btn-primary' %>
        <%= render 'shared/unit_modal', call: call, index: index %>
        <%= render 'shared/status_modal', call: call, index: index %>
        <%= render 'shared/assigned_note_modal', call: call, index: index %>
    </tr>

    <% end %>
  </tbody>
</table>