的Rails + Bootsrtap + AJAX：模式與形式後停止展示提交

Question

我有一個模型索引視圖（顯示所有記錄），我使用的引導和Ajax使索引視圖中更新。爲了做到這一點，我在每行的末尾添加了一個鏈接，單擊它後，將顯示一個帶有記錄屬性的表單的模式。我提交表單，並使用ajax，我更新數據庫，然後更新視圖（只有被更改的行）。

它工作正常的第一次，但如果我嘗試再次編輯同一行的模式停止顯示，點擊什麼也不做，甚至不是一個錯誤消息。儘管如此，它仍然適用於其他行。

如果我刪除從update.js.erb渲染（見下面的代碼）它也能工作，每一次，但後來我需要刷新整個頁面（每次更改後）顯示更新的變化。

代碼保持完全一樣（或者看起來是這樣），但我需要刷新頁面，以使其在更新的行（或多個）再次合作。

這是我的代碼：

CONTROLER（去除不相關碼）

before_action :set_status, only: [:edit, :update] 

def edit 
end 

def update 
    @status.update(status_params) 
    respond_to :js 
end 

private 

def set_status 
    @status = Status.find(params[:id]) 
end 

索引視圖

<div class="container contentaftermenu"> 
    <div class="row"> 
    <table class="table"> 
     <thead class="table-head"> 
     <tr> 
      <th class="centered">Sequence</th> 
      <th>Title</th> 
      <th>Description</th> 
      <th class="centered">Edit</th> 
     </tr> 
     </thead> 
     <tbody> 
     <% @statuses.each do |status| %> 
      <tr class="record-tr" id="status-<%= status.id %>"> 
      <%= render partial: "display", locals: { status: status } %> 
      </tr> 
     <% end %> 
     </tbody> 
    </table> 
    </div> 
</div> 
<div id="status-modal" tabindex="-1" role="dialog" class="modal fade"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $('img.bottom').click(function() { 
    $('#status-modal').modal("show"); 
    }); 
}); 
</script> 

顯示部分

<td class="centered"><%= status.sequence %></td> 
<td id="title-<%= status.id %>"><%= status.title %></td> 
<td id="desc-<%= status.id %>"><%= status.description %></td> 
<td id="act-<%= status.id %>" class="centered"> 
    <%= link_to edit_admin_status_path(status), remote: true do %> 
    <img id="sid-<%= status.id %>" class="bottom" src="../../images/admin/edit.png"> 
    <% end %> 
</td> 

編輯JS

$("#status-modal").html("<%= j(render 'form') %>"); 

形式局部

<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3 class="modal-title">Edit status</h3> 
    </div> 
    <%= form_for @status, url: admin_status_path(@status), remote: true do |f| %> 
     <div class="modal-body form-group form-admin"> 
     <ul class="errors alert-danger"></ul> 

     <div class="form-group"> 
      <%= f.label :title, class:"control-label" %> 
      <%= f.text_field :title, class: "form-control" %> 
     </div> 
     <div class="form-group"> 
      <%= f.label :description, class: "control-label" %> 
      <%= f.text_area :description, class: "form-control" %> 
     </div> 

     <%= f.submit class: "btn btn-primary" %> 
     <%= link_to "Cancel", "#", class: "btn", data: { dismiss: "modal" } %> 
     </div> 
    <% end %> 
    </div> 
</div> 

更新JS

$("ul.errors").html(""); 
$("ul.errors").removeClass("alert"); 

<% if @status.errors.any? %> 
    $("ul.errors").addClass("alert"); 

    <% @status.errors.full_messages.each do |message| %> 
    $("ul.errors").append($("<li />").html("<%= message.html_safe %>")); 
    <% end %> 
<% else %> 
    $("#status-<%= @status.id %>").html("<%= j(render partial: 'display', locals: { status: @status }) %>"); 
    $("#status-modal").modal("hide"); 
<% end %> 

謝謝你的幫助！

Answer 1

我認爲問題在於你用你的edit.js替換了模態中的所有html，這意味着JS模態對象不再存在，所以你的點擊函數顯示模態不能再找到模態對象。

你能不能嘗試更換具有形式模態的只是一部分，並應解決您的問題。

I.e.讓某此位的部分（我給它 「inner_form」 的ID）：

<%= form_for @status, url: admin_status_path(@status), remote: true, id:"inner_form" do |f| %> 
    <div class="modal-body form-group form-admin"> 
    <ul class="errors alert-danger"></ul> 

    <div class="form-group"> 
     <%= f.label :title, class:"control-label" %> 
     <%= f.text_field :title, class: "form-control" %> 
    </div> 
    <div class="form-group"> 
     <%= f.label :description, class: "control-label" %> 
     <%= f.text_area :description, class: "form-control" %> 
    </div> 

    <%= f.submit class: "btn btn-primary" %> 
    <%= link_to "Cancel", "#", class: "btn", data: { dismiss: "modal" } %> 
    </div> 
<% end %> 

則只需更換，在您的edit.js：

$("#inner_form").html("<%= j(render 'inner_form') %>");