Update-Liste Artikel in übertragenem django Vorlage

Question

In meiner Vorlage I Liste vom Server abgerufen haben:

{% for elem in event_list %} 
    <li id="item{{forloop.counter}}"> 
    <a>...</a> 
    <button onclick="fetch({{elem.id}})">...</button> 
    {{ elem.id }} 
    {{ elem.name }} 
    </li> 
{% endfor %} 

Wenn ich auf den Button klicke ich auf den Server rufen einige neue Informationen zu holen und diese spezifische Liste aktualisieren möchten Element mit den neu abgerufenen Informationen. Wie könnte ich das tun?

Mein Javascript ist wie folgt:

function fetch(elem_id){ 
    var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      resp = JSON.parse(xhr.responseText); 
      document.getElementById("item"+elem_id).innerHTML = resp; 
     } 
     }; 
     url = SERVER_URL 
     xhr.open('GET', url, true); 
     xhr.send();  
}  

Ich habe den Server ein Wörterbuch zurück, die in Javascript, dann als JSON-Objekt zu sehen ist, aber ich kann das Listenelement nicht erfolgreich aktualisieren.

Jede Hilfe ist

geschätzt

Answer 1

Ich denke, das Problem hier ist, sind Sie eine Liste zurückzukehren versuchen, und dann die Liste mit django Vorlage Loops zu bauen. Sie können wahrscheinlich durch ein paar Ringe springen und dies tun, indem Sie eine jquery-Bedingung machen, wo Sie eine andere HTML-Datei in Ihre Seite einfügen, nachdem eine Antwort zurückgegeben wird ... aber so oder so müssen Sie jquery verwenden & django Ich bin nicht sicher, warum dieser Ansatz sauberer wäre.

Um dies zu tun, würde ich einen AJAX-Handler auf Ihrer Schaltfläche verwenden, um eine Django-Funktion auszuführen und eine JSON-Antwort zurückgeben, die die Liste enthält, mit der Sie jQuery verwenden können.

In Django:

def list_return_function(request): 
     //logic 
     updated_list = [...] 
    response_data = json.dumps({'list_data':updated_list)}) 
    return HttpResponse(response_data, content_type='application/json') 

JQuery Handler:

$(button_selector).on('click', function() { 
    //some logic maybe 
    old_list = [...] 
    $.ajax({ 
    url: "/site_url/django_function_url/", 
    type: "POST", 
    data: {data: old_list,}, 
    success:function(data) { 
      //your returned python list 
      new_list = data['list_data'] 
      //Now, loop through the new_list and append these items wrapped in <li> tags to your ul. 


     } 
    }); 


}); 

Das ist ziemlich einfach, aber vielleicht werden Sie die Idee. Wenn das total scheiße ist und nicht hilft, lass es mich wissen warum und ich versuche es klarer zu machen.

Also es hängt davon ab, was Sie Ihre Python-Funktion auf, was Sie mit jquery tun möchten zurückgeben. Gibt es die vollständige, neue Liste oder nur neue Elemente zurück, die aktualisiert werden müssen. Wenn es die vollständige neue Liste zurückgibt, würde ich das HTML löschen und es neu debuggen. Aber ich fügte in der grundlegenden