title: Bootstrap Modal Form won't close
body: <p>I have a table populated with data where each row has an edit button. Upon edit, a bootstrap modal popup form appears, with the table row data that is now editable. This popup form has a submit button, and a close button. The close button works as expected (closed the modal popup), and the submit button does update my data, but will not close the form. </p>
  
  <p>So in short, I have the modal popup showing up correctly, and the submit button on the popup actually works, but I cannot get the form to then close after the data has been updated.</p>
  
  <p>Here are the relevant parts...</p>
  
  <p><strong>index.html.erb</strong></p>
  
  <pre><code>&lt;tbody class="majors-index"&gt;
      &lt;!-- This renders my table with all the data and edit buttons --&gt;
      &lt;%= render 'index' %&gt;
  &lt;/tbody&gt;
  ....
  ....
  &lt;div class="modal" id="major-modal"&gt;
  &lt;/div&gt;
  ....
  </code></pre>
  
  <p><strong>_index.html.erb</strong></p>
  
  <pre><code>....
  &lt;!-- This opens the modal dialogue --&gt;
  &lt;%= link_to "Edit", edit_major_path(m), remote: true, class: "btn btn-primary", data: {toggle: 'modal', target: "#major-modal"} %&gt;
  ....
  </code></pre>
  
  <p><strong>edit.js.erb</strong></p>
  
  <pre><code>// display the modal form
  $("#major-modal").html("&lt;%= escape_javascript(render partial: "majors/edit") %&gt;")
  $("#major-modal").modal("toggle")
  </code></pre>
  
  <p><strong>_edit.html.erb</strong></p>
  
  <pre><code>&lt;!-- #modal-without-animation --&gt;
  &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4&gt;&lt;%= "Editing #{@major.name}" %&gt;&lt;/h4&gt;
      &lt;/div&gt;
      &lt;%= render "form"%&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>_form.html.erb</strong></p>
  
  <pre><code>&lt;%= form_for @major, remote: true, html: {class: "form-horizontal", style: "display-inline;"} do |f| %&gt;
      &lt;div class="modal-body"&gt;
      ....
      ....
      &lt;%= f.submit "Modify", class: "btn btn-primary", id: "btnSubmit" %&gt;
      &lt;%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %&gt;
      ....
      &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Now, upon hitting submit, the first thing that gets called is my update.js.erb, which should be closing my modal form.</p>
  
  <p><strong>update.js.erb</strong></p>
  
  <pre><code>$("#major-modal").html("&lt;%= escape_javascript(render partial: "majors/edit") %&gt;")
  $("#major-modal").modal("toggle")
  </code></pre>
  
  <p>But for whatever reason, the modal form will not close. I have tried switching the "toggle" to "hide", but that also has no effect. I know for a fact the update.js.erb is getting called, because if I just stick an alert in there, it gets fired. </p>
  
  <p>What am I doing wrong? Why won't the modal form close?</p>
  
  <p>UPDATE:</p>
  
  <p>Here is my controller...</p>
  
  <pre><code>def update
      @majors = Major.all
      @major = Major.find(params[:id])
      @major.update_attributes(major_params)
  
      respond_to do |format|
        format.js
      end
    end
  </code></pre>