jquery - Bootstrap Modal Form won't close -

jquery - Bootstrap Modal Form won't close -

i have table populated info each row has edit button. upon edit, bootstrap modal popup form appears, table row info editable. popup form has submit button, , close button. close button works expected (closed modal popup), , submit button update data, not close form.

so in short, have modal popup showing correctly, , submit button on popup works, cannot form close after info has been updated.

here relevant parts...

index.html.erb

<tbody class="majors-index"> <!-- renders table info , edit buttons --> <%= render 'index' %> </tbody> .... .... <div class="modal" id="major-modal"> </div> ....

_index.html.erb

.... <!-- opens modal dialogue --> <%= link_to "edit", edit_major_path(m), remote: true, class: "btn btn-primary", data: {toggle: 'modal', target: "#major-modal"} %> ....

edit.js.erb

// display modal form $("#major-modal").html("<%= escape_javascript(render partial: "majors/edit") %>") $("#major-modal").modal("toggle")

_edit.html.erb

<!-- #modal-without-animation --> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4><%= "editing #{@major.name}" %></h4> </div> <%= render "form"%> </div> </div>

_form.html.erb

<%= form_for @major, remote: true, html: {class: "form-horizontal", style: "display-inline;"} |f| %> <div class="modal-body"> .... .... <%= f.submit "modify", class: "btn btn-primary", id: "btnsubmit" %> <%= link_to "cancel", "#", class: "btn", data: {dismiss: "modal"} %> .... </div> <% end %>

now, upon hitting submit, first thing gets called update.js.erb, should closing modal form.

update.js.erb

$("#major-modal").html("<%= escape_javascript(render partial: "majors/edit") %>") $("#major-modal").modal("toggle")

but whatever reason, modal form not close. have tried switching "toggle" "hide", has no effect. know fact update.js.erb getting called, because if stick alert in there, gets fired.

what doing wrong? why won't modal form close?

update:

here controller...

def update @majors = major.all @major = major.find(params[:id]) @major.update_attributes(major_params) respond_to |format| format.js end end

ok, after page rendered. when adding new element dynamically doesn't added dom easy jquery selection. cannot close element doesn't exist.

you can solve delegate event:

$('#btnsubmit').on('submit', '#major-modal', function() { $(this).modal('hide'); });

this assuming putting document ready clause, so:

$(document).ready( $('#btnsubmit').on('submit', '#major-modal', function () { $(this).modal('hide'); }));

jquery ruby ajax ruby-on-rails-4 twitter-bootstrap-3