Gewusst wie: aktualisieren Sie ein div ohne reload der gesamten Seite?

Ich habe eine div und ich möchte zur Aktualisierung seiner Inhalte ohne Neuladen der gesamten Seite.

Ich habe versucht, viele Male, mit vielen Methoden (ajax-call, javascript, etc...), aber ich habe es getan.

Div-zeigt den gesamten Inhalt ModelName.all
Und in diesem speziellen div-wir können hinzufügen neue Einheiten (durch eine form) das Modell, das ich verwenden.

Ich dieses div Dank einer Rails-Teilansicht.

Zeit benutze ich diese, wenn der Benutzer das Formular abschicken : 

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

Aber es scheint, meine eingeschränkte Sicht nicht ein up-to-date-Modell. Denn bevor ich die neue Einheit sehe ich zum Beispiel 5 Elemente, und nach füge ich die neue Entität, sehe ich wieder die 5 Elemente. Zu Testzwecken nutze ich eine javascript - alert zeigt ModelName.all.count

Und die Warnung zeigt 5 !
Aber wenn ich mir meine Datenbank-Inhalte (vor dem Alarm), kann ich sehen, 6 Elemente ! Und wenn ich aktualisieren meine Seite manuell, die div zeigt 6 Elemente.

Code zu erklären :

In der Hauptansicht :

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

_articles (dem partial view) :

<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, die Sie laden nicht die gesamte Seite jedes mal, die Sie hinzufügen, einen anderen Artikel.

  • Wo hast du geschrieben $('#ArticlesDiv').html("<%= escape_javascript (render partial: 'articles') %>"); ?
InformationsquelleAutor testa abalez | 2016-05-09
  1. 0

    Können Sie den Inhalt der div in eine partielle und laden Sie den Inhalt über eine URL sagen, /divcontents. Sie können aktualisieren Sie die <div> mit .load():

    $('#ArticlesDiv').load("/divcontents");
    InformationsquelleAutor Praveen Kumar Purushothaman
  2. 0

    Versuchen, verwenden Sie load Funktion von jQuery, sollten Sie etwas wie das hier 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");
    });
});
    InformationsquelleAutor praguan
  3. 0
    <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>
    InformationsquelleAutor Atchyut Nagabhairava
Schreibe einen Kommentar