Bootstrap 4 Rails中的模式表單禁用了Ajax刷新的提交按鈕

我在使用Bootstrap 4 alpha v6的Rails 5.1應用程序中創建表單，當我點擊「註釋」按鈕時會彈出一個模式，並且我可以輸入文本，提交一個便條，然後它返回到視圖並關閉模式。Bootstrap 4 Rails中的模式表單禁用了Ajax刷新的提交按鈕

我通過ajax每15秒輪詢我的局部視圖以刷新div內容，但是在初始提交註釋之後，如果我等待15s以便部分刷新並嘗試提交另一個註釋，模式將彈出再次，但創建/提交按鈕什麼都不做。

我在想，在ajax刷新模式是解除綁定，但我不熟悉Bootstrap和JS來真正解決這個問題。我一直在搜索堆棧和谷歌，並且已經短缺。這裏是我的視圖代碼：

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>

我明明做了一個古老的Rails的類似的東西3.2應用，而無需Turbolinks並制定了罰款，雖然我使用的是舊版本的引導2.3.x版本我的相信。舊的應用程序可以正常使用這種類型的功能，但Rails 5.1，Bootstrap 4 Alpha v6和Turbolinks的新應用程序會在部分刷新後禁用提交/創建按鈕。

我試着卸下Turbolinks，看看這是否是一個問題，我沒有運氣。我也試過jquery-turbolinks，它還沒有Rails 5的兼容性。

我比Ruby更沉重，因此請原諒我缺乏知識。

更新

在檢查的形式，我看到這個

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

看起來形式收出某種原因使提交按鈕沒有得到包括在內。這發生在初始頁面加載和Ajax刷新。

來源

2017-06-11 nulltek

我被告知我需要通過jQuery或JS以某種方式將事件綁定到提交按鈕，但不知道如何做到這一點給定我的代碼結構。 – nulltek

發現這是一個HTML問題，在我的視圖之外渲染窗體。所以它早早地關閉了表格。將已渲染的部分移動到正確的div和tr標籤內部，現在它一直在運行！

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

來源

2017-06-12 15:39:39 nulltek

Bootstrap 4 Rails中的模式表單禁用了Ajax刷新的提交按鈕

回答

相關問題