Rails 5 - Aktualisieren des Modells mit Ajax und Anhängen der Anfrage Antwort html in Sicht

Question

Ich rufe die Benutzer-Controller Update-Aktion über das Formular mit Remote: True. Ich möchte im Hinblick auf aktualisiertem Benutzer html machen, so habe ich diesen Code in Controller:

def update 
    @user = User.find(params[:id]) 
    respond_to do |format| 
    if @user.update_attributes(user_params) 
     format.html { 
     flash[:success] = "Profile updated" 
     redirect_back fallback_location: @user 
     } 
     format.js { render partial: 'user', locals: { user: @user } } 
    else 
     format.html { render 'show' } 
     format.js {} 
    end 
    end 
end 

Es funktioniert gut, reagiert Server mit der richtigen HTML gerendert und Status 200. Das Problem ist mit meinem Coffeescript:

$ -> 
    $(".edit_user[data-remote]").on "ajax:success", (e, data, status, xhr) -> 
    console.log(e) 
    console.log(data) 
    console.log(status) 
    console.log(xhr) 
    $(this).closest('tr').fadeOut() 
    if $(this).data('action') == 'hire' 
     $('#active-users').append data 
    else 
     $('#archive-users').append data 

Dieser Code wird nicht ausgeführt und ich habe keine Ahnung warum. Ich habe festgestellt, dass, wenn ich render partial: 'user', locals: { user: @user } aus dem Controller entfernen Coffescript ausgeführt wird (aber natürlich brauche ich das gerenderte HTML).

Wie kann ich mein Coffescript reparieren, um es richtig auszuführen? Ich bin ziemlich neu in JS und CoffeScript.

Answer 1

Wenn Sie 'remote: true' verwenden, wird automatisch die Javascript-Datei der entsprechenden Controller-Aktion ausgeführt, in diesem Fall werden die Benutzer 'update'. Es ist nicht nötig, einen separaten Datei-Binding-Ajax zu haben: Erfolg oder ähnliches.

Also, erste Änderung:

format.js { render partial: 'user', locals: { user: @user } } 

An:

format.js {} 

Dann erstellen Sie eine Dateiansichten/user/update.js.erb, und innerhalb dieser Datei hinzufügen, um dieses:

$('#active-users').append('<%= j render partial: 'user', locals: { user: @user } %>') 

Das 'j' wird die Ausgabe des HTML entkommen, so dass das Javascript keinen Fehler werfen wird. Sobald die Controller-Aktion abgeschlossen ist, wird der Inhalt des Partials an # active-users angehängt. Sie können natürlich auch zusätzliches Javascript hinzufügen, das Sie für diese Datei benötigen.