Ruby on Rails - Bearbeiten/Aktualisieren von Inhalten auf Layout anzeigen

Question

Ich versuche herauszufinden, wie ein System implementiert werden kann, das es mir erlaubt, bestimmte Felder zu aktualisieren, ohne von der aktuellen Seite weg zu navigieren, ohne sie neu zu laden.

ich dies habe auf vielen Websites gesehen, einschließlich der Bearbeitung Kommentare zu Stackoverflow.

Beispiel:

Sie schrieben und einen Comment geschrieben. Während seiner Zeit bei all den entsandten Comments suchen, gibt es eine Schaltfläche ‚Bearbeiten‘, die Änderungen, die Comment wieder in eine text_area an Ort und Stelle, so dass Sie den Text aktualisieren, und eine Taste, um es zu retten. Dann sieht das aktualisierte Comment korrekt aus, und Sie mussten nicht navigieren oder aktualisieren.

Ich glaube, was sie tun ist:

1. Wenn Sie auf die Schaltfläche ‚Bearbeiten‘, Javascript generiert/ein verstecktes Layout mit dem text_area anzeigt.
2. Wenn Sie auf "Speichern" klicken, wird eine Anforderung im Hintergrund gesendet, ohne den Bildschirm zu aktualisieren.
3. Javascript wird den aktualisierten Text übernehmen und in das alte Layout kopieren und das anzeigen.

Gibt es eine gute Beispiele dafür, wie dies zu implementieren? Ich bin mir nicht einmal sicher, welche Terminologie für diese Art der Aktualisierung verwendet wird.

Danke für Ihre Hilfe.

Answer 1

gibt es viele Beispiele, Ihr Ziel zu erreichen.

Geben Sie mir einen Versuch, Ihnen ein einfaches Beispiel für ein besseres Verständnis zu geben.

Angenommen, Sie haben ein Post Modell

class Post 
end 

Ihre Index-Seite wie folgt aus (in Controller-Index @posts = Post.all

<% #app/views/posts/index.html.erb %> 
<div id="posts"> 
    <%= render @posts %> 
</div> 

Der Beitrag Objekt Teil:

<% #app/views/posts/_post.html.erb %> 
<div id="<%= dom_id(post)%>"> 
    <%= post.title %> 
</div> 

Und Update Ihre form_for Tags mit der Remote-Attribut

Jetzt können Sie den aktuellen Beitrag zu den div # Beiträge hinzufügen oder das gesamte div ersetzen.

<% #app/views/posts/create.js.erb %> 
$("#posts").append('<%=j(render @post)%>') 

Ihr Update könnte einen Eintrag aktualisieren, indem Sie die div mit den dom_id() für die aktualisierten Post zu ersetzen.

<% #app/views/posts/update.js.erb %> 
$("#posts ##{dom_id(@post)}").html('<%=j(render @post)%>') 

Das ist alles.