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刷新的提交按钮

回答

相关问题