Rails + Bootsrtap + AJAX: Modal mit Formular stoppt nach dem Senden

Question

Ich habe eine Indexansicht für ein Modell (alle Datensätze angezeigt), und ich benutze Bootstrap und Ajax, um Updates innerhalb der Indexansicht zu machen. Um dies zu erreichen, habe ich einen Link am Ende jeder Zeile hinzugefügt, der nach dem Klicken ein Modal mit einem Formular mit den Attributen des Datensatzes anzeigt. Ich übergebe das Formular und mit Ajax, ich aktualisiere die db und aktualisieren Sie dann die Ansicht (nur die Zeile, die geändert wurde).

Es funktioniert gut zum ersten Mal, aber wenn ich versuche, die gleiche Zeile wieder zu bearbeiten, stoppt das Modal, das Klicken macht nichts, nicht einmal eine Fehlermeldung. Es funktioniert immer noch mit den anderen Zeilen.

Wenn ich das Rendering von der update.js.erb (siehe Code unten) entfernen, funktioniert es auch jedes Mal, aber dann muss ich die ganze Seite aktualisieren (nach jeder Änderung), um Update-Änderungen anzuzeigen.

Der Code bleibt genau derselbe (oder so scheint es), aber ich muss die Seite aktualisieren, damit es wieder in den aktualisierten Zeile (n) funktioniert.

Hier ist mein Code:

Controler (nicht relevant Code entfernt)

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 

Indexansicht

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

Anzeige Teil

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

bearbeiten js

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

Form Teil

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

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

Vielen Dank für Ihre Hilfe!

Answer 1

Ich denke, das Problem ist, dass Sie alle HTML innerhalb des Modals mit Ihrer edit.js ersetzen, was bedeutet, dass das JS Modal-Objekt nicht mehr existiert, so dass Ihre On-Click-Funktion das Modal nicht mehr finden kann modales Objekt.

Könnten Sie versuchen, nur den Teil des Modals zu ersetzen, der das Formular enthält und das Ihr Problem lösen sollte?

I.e. machen eine teilweise nur für diesen Bit (habe ich ihm eine ID von "inner_form"):

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

dann ersetzen Sie einfach, dass in Ihrem edit.js:

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