Ajax wie Count zeigt das gleiche für jeden Beitrag in Django

Question

Das Problem ist aufgrund der Ajax-Implementierung in meiner Django Twitter-Klon-App, die gleiche Anzahl für jeden Beitrag zeigt das gleiche nach dem Klicken auf die Schaltfläche ähnlich, sondern nach der Seite Aktualisieren Sie das ist in Ordnung. Ich bin nah dran, das Problem zu lösen, stecke aber irgendwie fest.

Ansicht:

def add_like(request): 
    if request.method == 'GET': 
     ans_id = request.GET['id'] 
     user = request.user.profile 
     liked_tweet = get_object_or_404(Tweet, pk=ans_id) 

if ans_id: 
    # creating instance by sending the Like table fields 
    instance, created = Like.objects.get_or_create(liker=user, liked_tweet=liked_tweet) 
    ans = Tweet.objects.get(id=(int(ans_id))) 
    if ans: 
     likes = ans.likes + 1 
     ans.likes = likes 
     ans.save() 
# returns the likes field of a tweet post 
return HttpResponse(likes) 

der Httpresponse ist die Gleichen das Senden und das schafft das Problem, denke ich.

die Vorlage:

{% for tw in tweets %} 
    <div class="blog-post"> 
     <p> 
      {{ tw.content|safe }}<br><hr> 
      <small class="small"> 
       লিখসে - 
       <!-- in the "href" we can pass data like "pk", accessing by the structure the current object is based on--> 
       <a href="{% url 'profile' pk=tw.tweeter.user.pk %}">{{ tw.tweeter.user.username|capfirst }}</a> 
      </small> 
     </p> 
     {% if user.is_authenticated %} 
     <button class="btn btn-default likes-button" type="button" 
     data-ansid="{{ tw.pk }}">Like</button> 
     <i> Total Likes: </i><em class="like_count">{{ tw.likes }}</em> 
     {% endif %} 
    </div> 

der Ajax-Skript:

$(".likes-button").click(function(e) { 
if ($(this).html() == "Like") { 
    $(this).html('Unlike'); 
    //alert("js working"); 
    // error was there for "data" insted of "attr" 
    var ansid = $(this).attr("data-ansid"); 
    $.ajax({ 
     url: '{% url "add_like" %}', 
     type: 'get', 
     data: {id: ansid} 
    }).done(function (data) { 
     alert("success"); 
     $('.like_count').html(data); 
     //$('#likes').hide(); 
    }).fail(function (err) { 
     alert(err); 
    }); 
} 

Vielen Dank im Voraus.

Answer 1

denke ich, der erste Kommentar von Sayse Ihrer Antwort gibt. Ich versuche nur ein bisschen mehr zu erklären.

Also was Sie getan haben, ist nach einer erfolgreichen AJAX-Anfrage, ersetzen Sie vorhandene wie zählen mit den Daten, die Sie von AJAX in jedem Element erhalten, die eine Klasse mit dem Namen .like_count haben.

Check Code $('.like_count').html(data); Diese wählen alle elemnt like_count Klasse hat und die HTML ändern.

Stattdessen sollten Sie nach einem erfolgreichen Ajax die Daten nur an einer Stelle ändern. Sie müssen den entsprechenden jQuery-Selektor auswählen.

Etwas wie .closest() kann verwendet werden. In diesem Fall, verwenden Sie (folgender Code wird nicht getestet) $(this).closest('.like_count').html(data); zu apeend 'wie count' in entsprechenden Element.

Sie können auch dynamische ID zu jedem 'wie Anzahl' Element basierend auf ID zuweisen und dann Exect ID Selector verwenden.

Hoffe, das hilft.

Prost!

Answer 2

Sagen Sie:

aber nach der Aktualisierung der Seite, die

Da Ihren Code-Snippet Werken in Ordnung ist, sind Sie einfach nur für die Gleichen zählen Inkrementierung zu passieren und sehen Sie das Live-Update in der Vorlage.

Nun, in der Theorie, hier:

• Die Funktion, die wie erhöht mit einer JSON-Antwort des erhöhten Wertes aus der Datenbank zurückgeben sollte.
• Eine Client-Funktion im Standby akzeptiert diese JSON-Antwort und aktualisiert den Vorlagenwert entsprechend.

In Practicals:

• Siehe diese Antwort: https://stackoverflow.com/a/31832275/1757321