Обновите содержимое в цикле for с помощью jquery в Django

Question

Я создаю веб-сайт, который позволяет пользователям искать список статей.После того, как список документов возвращен, пользователь может нажать «нравится» или «не нравится» на одну или несколько статей.Счетчик лайков должен динамически обновляться, когда пользователь нажимает кнопку лайк.

Я использую jquery для обработки динамического обновления количества подобных.Однако я не уверен, как указать функции success в идентификаторе ajax WHICH для обновления.Причина в том, что id генерируется на лету и определяется тем, какие документы возвращаются пользователю в качестве результатов поиска.

Пока у меня есть следующее в шаблоне:

{% for result in results %}
 <li >
{{ result.title}},
<a href="#" class="like_button" data-pid="{{ result.pk }}"> <span class="like_span fa fa-thumbs-up"></span> </a>

 <strong id="like_count_{{ result.pk }}">{{result.likes}} </strong> 
</li> 
{% endfor %}

Как видите, я указываю идентификатор части, где я хочу, чтобы динамическое обновление происходило как "like_count_{{ result.pk }}".Я не уверен, что это лучший способ сделать это.

Часть jquery выглядит так:

    <script>
        $(document).ready(function(){
          $(".like_button").click(function(){
                $.ajax({
                    type: "GET",
                    data: {'pk': $(this).data('pid'),
                           'liked': $("span").hasClass('fa fa-thumbs-up') },
                    url: "{% url 'search:paperpreference' %}",
                    success: function(response) {
                        var pk  = $(this).data('pid');
                        $(?????).html(response.likes )
                    },
                    error: function(response, error) {
                        alert(error);
                    }
                });
            });
          });
    </script>

Проще говоря, я не знаю, как я могу указать?????часть такая, что при успехе новый счетчик обновлений обновляется только для этой конкретной бумаги, а не для первой статьи в цикле.

Файл views.py пока имеет следующее:

def paperpreference(request):
   # if request.method == "GET":
    pid = request.GET['pk']
    paper = Paper.objects.get(pk=pid)
    likes = paper.likes + 1
    paper.likes = likes
    paper.save()
    data = {'likes': paper.likes}

    return JsonResponse(data)

Я новичок в Jquery, любая помощь будет высоко ценится!

Answer 1

другой вариант - вернуть идентификатор с сервера.

def paperpreference(request):
   # if request.method == "GET":
    pid = request.GET['pk']
    paper = Paper.objects.get(pk=pid)
    likes = paper.likes + 1
    paper.likes = likes
    paper.save()
    data = {'likes': paper.likes,'pid':pid}

    return JsonResponse(data)

<script>
        $(document).ready(function(){
          $(".like_button").click(function(){
                var pk = $(this).data('pid')
                $.ajax({
                    type: "GET",
                    data: {'pk': pk,
                           'liked': $("span").hasClass('fa fa-thumbs-up') },
                    url: "{% url 'search:paperpreference' %}",
                    success: function(response) {
                        $("#like_count_"+ response.pid).html(response.likes )
                    },
                    error: function(response, error) {
                        alert(error);
                    }
                });
            });
          });
    </script>

Answer 2

Благодаря предложениям @dirkgroten теперь счетчик лайков можно динамически обновлять с помощью следующей функции jquery. Хитрость заключается в том, чтобы переместить объявление pk до ajax.

    <script>
        $(document).ready(function(){
          $(".like_button").click(function(){
                var pk = $(this).data('pid')
                $.ajax({
                    type: "GET",
                    data: {'pk': pk,
                           'liked': $("span").hasClass('fa fa-thumbs-up') },
                    url: "{% url 'search:paperpreference' %}",
                    success: function(response) {
                        $("#like_count_"+ pk).html(response.likes )
                    },
                    error: function(response, error) {
                        alert(error);
                    }
                });
            });
          });
    </script>