Wie aktualisiert man ein div, ohne die gesamte Seite neu zu laden?

Question

Ich habe eine div und ich möchte seinen Inhalt aktualisieren, ohne die gesamte Seite neu zu laden.

Ich versuchte viele Male mit vielen Methoden (Ajax-Aufruf, Javascript, etc ...), aber ich habe es nicht getan.

Mein div zeigt den gesamten Inhalt von ModelName.all Und in diesem speziellen div können wir neue Entitäten (dank eines Formulars) des Modells, das ich verwende, hinzufügen.

Ich zeige dieses div dank einer Teilansicht Rails.

Derzeit verwende ich diese, wenn der Benutzer das Formular abschicken:

$('#ArticlesDiv').html("<%= escape_javascript (render partial: 'articles') %>"); 

Aber es scheint, meine Teilansicht verfügt nicht über ein up-to-date-Modell. Denn bevor ich die neue Entität hinzufüge, sehe ich zum Beispiel 5 Elemente, und nachdem ich die neue Entität hinzugefügt habe, sehe ich wieder 5 Elemente. Zu Testzwecken benutze ich ein Javascript alert welches ModelName.all.count

anzeigt und die Warnung 5 anzeigt! Aber wenn ich meinen Datenbankinhalt (vor der Warnung) betrachte, kann ich 6 Elemente sehen! Und wenn ich meine Seite manuell aktualisiere, zeigt die div 6 Elemente an.

-Code zu erklären:

Die Hauptansicht:

<div id="ArticlesDiv"> 
    <%= render(:partial => "articles") %> 
</div> 

_articles (die Teilansicht):

<script> 
    alert('<%=Article.all.count%>'); 
</script> 

<% Article.all.each do |article|) %> 

<strong><%= article.name %></strong><br /> 

<% end %> 

Mein Ziel ist es, eine glatte Oberfläche zu haben, die es nicht tut Laden Sie die gesamte Seite neu, wenn Sie einen anderen Artikel hinzufügen.

Answer 1

Sie können den Inhalt der div in einer partiellen und laden Sie nur den Inhalt mit einer URL sagen, /divcontents. Sie können die <div> mit .load() aktualisieren:

$('#ArticlesDiv').load("/divcontents"); 

Answer 2

Try Ladefunktion jQuery zu verwenden, sollten Sie etwas tun:

HTML:

<div id="div1"></div> 
<button type="button" id="button">Test</button> 

jQuery:

$(document).ready(function(){ 
    $("#button").click(function(){ 
     $("#div1").load("demo_test.txt"); 
    }); 
}); 

Answer 3

<script> 
$(document).ready(function() { 
    // will call refreshPartial every 5 seconds 
    setInterval(refreshPartial, 5000) 

}); 

// calls action refreshing the partial 
function refreshPartial() { 
    $.ajax({ 
    url: "page_url", 
    dataType: 'script', 
    format: 'js' 
}) 
} 
</script>