Bootstrap 4 Railsのモーダルフォームでajaxをリフレッシュするとサブミットボタンが無効になる

Question

「メモ」ボタンをクリックすると、モーダルがポップアップしてテキストを入力できるようになりました。 、メモを提出して、私をビューに戻し、モーダルを閉じます。

私は15分ごとにajaxを使ってdivコンテンツをリフレッシュするために私のパーシャルをポーリングしていますが、15秒間リフレッシュして別のノートを提出しようとするとメモの最初の投稿後にモーダルがポップアップしますもう一度、作成/送信ボタンは何もしません。

私は、ajaxのリフレッシュでは何とかバインディングが解除されていると思っていますが、BootstrapとJSでこれに精通しているわけではありません。私は一日中スタックとgoogleを検索してきました。ここに私のビューコードです：

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（抜粋）

<% @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> 

私は明らかにTurbolinksずに古いのRails 3.2のアプリケーションで同様の何かをやったと私は、私は、ブートストラップ2.3.x以降の古いバージョンを使用していたが、それが正常に働きました信じる。古いアプリはこの同じタイプの機能でうまく動作しますが、Rails 5.1、Bootstrap 4 Alpha v6、Turbolinksの新しいアプリでは、部分更新後にサブミット/作成ボタンが無効になります。

Turbolinksを削除して問題があるかどうかを確認しましたが、運がなかったのです。私もjquery-turbolinksを試しましたが、Rails 5との互換性はまだありません。

私はJSよりもRubyの方が重いので、あらかじめ知識が不足しているとお考えください。

更新

フォームを検査するとき、私は送信ボタンが含まれませんので、フォームが何らかの理由で手仕舞いているように見えます。この

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

を参照してください。これは初期ページの読み込み時とajaxの更新時に発生します。

Answer 1

これはHTMLの問題で、フォームを自分のビューの外に表示しています。だから早くフォームを閉じていた。レンダリングされた部分的な部分を適切なdivタグとtrタグの内部に移動しました。