DJango Ajax - кнопка «Мне нравится» изменяется только в первом сообщении при нажатии

Question

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

Я использую Ajax, чтобы предотвратить перезагрузку страницы при нажатии кнопки «Мне нравится». Мне удалось реализовать аналогичное представление, но у меня есть проблема. Ajax работает правильно, но только кнопка «Мне нравится» в первом сообщении изменяется при нажатии с «Мне нравится» на «Не нравится». Кнопка «Мне нравится» во втором посте не меняется.

Мой код выглядит следующим образом:

@login_required
def home_view(request):
    #All posts in new feed
    all_images = Post.objects.filter(
        Q(poster_profile=request.user, active=True)|
        Q(poster_profile__from_user__to_user=request.user, active=True)|
        Q(poster_profile__to_user__from_user=request.user, active=True)|
        Q(poster_profile__profile__friends__user=request.user, active=True))

    #If post is liked displayed button
    posts = Post.objects.filter(pk__in=all_images)
    is_liked = {}
    for post in posts:
        if post.likes.filter(id=request.user.id).exists():
            is_liked[post.id] = True

   context = {'all_images': all_images, 'is_liked': is_liked}
   return render(request,'home.html', context)

   #Post likes
   @login_required
   def like_post_view(request):
       # post = get_object_or_404(Post, id=request.POST.get('post_id'))
       post = get_object_or_404(Post, id=request.POST.get('id'))
       is_liked = False
       if post.likes.filter(id=request.user.id).exists():
           post.likes.remove(request.user)
           is_liked = False
       else:
           is_liked = True
           post.likes.add(request.user)
       context = {'post': post, 'is_liked': is_liked,}
       if request.is_ajax():
           html = render_to_string('ajax_postlikes.html', context, request=request)
       return JsonResponse({'form': html})
       return HttpResponseRedirect(request.META.get('HTTP_REFERER'))

Шаблон: ajax_postlike. html

    <p>Like{{post.likes.count}}</p>

    <form action="{% url 'site:like_post' %}" method="POST">
    {% csrf_token %}
    {% if is_liked %}
    <button type="submit" name="post_id" value="{{ post.id }}" class="like float-left mr-2">
    Unlike
    </button>
    {% else %}
    <button type="submit" name="post_id" value="{{ post.id }}" class="like float-left mr-2">
    like
    </button>
    {% endif %}
    </form>

Шаблон: home. html

    <div class="ml-1" id="like-section">
    {% include 'ajax_postlikes.html' %}
    </div>

Ajax / Jquery:

    <script type="text/javascript">
    $(document).on('click', '.like', function(event){
      event.preventDefault();
      var pk = $(this).attr('value');
      $.ajax({
        type: 'POST',
        url: "{% url 'site:like_post' %}",
        data: {'id':pk, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        dataType: 'json',
        success: function(response) {
          $('#like-section{{ post.id }}').html(response['form'])
          console.log($('#like-section{{ post.id }}').html(response['form']));
      },
      error: function(rs, e) {
      console.log(rs.resopnseText);
    },
   });
  });
 </script>

Что мне нужно сделать, чтобы исправить мою проблему с состоянием кнопки, не переключающейся между "like" и «в отличие», после события клика?

[! [Введите описание изображения здесь] [1]] [1] [1]: https://i.stack.imgur.com/X4MWc.jpg

Answer 1

Шаблон home. html имеет 'like-section' в качестве идентификатора, но ваш селектор JQuery получает $ ('# like-section {{post.id}}') - отсутствие post.id в шаблоне может быть причина, по которой обновляется только первое сообщение.

<div class="ml-1" id="like-section">
    {% include 'ajax_postlikes.html' %}
</div>

Редактировать: Итак, я воссоздаю ваши виды, модели и т. д. c. и удалось заставить его работать с некоторыми изменениями.

1. Я изменил дом. Шаблон html, чтобы включить Django язык шаблонов для l oop, я не мог видеть это в вашем исходном коде, поэтому не уверен, как сообщения создаются в шаблоне точно. Этот формат будет работать при загрузке страницы и при вызове AJAX для одного лайка. Я также внес некоторые изменения в вызов AJAX и, как обрабатывается ответ, я заметил какой-то случайный язык шаблонов, который не будет работать.

  <body>
    <div class="ml-1" id="like-section">
      {% for post in post_list %}
        {% include 'ajax_postlikes.html' %}
      {% endfor %}
    </div>

    <script type="text/javascript">
      $(document).on('click', '.like', function(event){
        event.preventDefault();
        var pk = $(this).attr('value');

        $.ajax({
          type: 'POST',
          url: "{% url 'like_post_view' %}",
          headers: { 'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val() },
          data: {id: pk},
          success: function(response) {
            $('#like-section'+pk).html(response)
          },
          error: function(rs, e) {
            console.log(rs.responseText);
          },
         });
      });
    </script>
  </body>

Я также изменил формат ajax_postlikes. html, я думаю, вы уже сделали это, но я добавил идентификатор в форму. Я также изменил работу оператора if / else, который объясняется в представлении.

<form id='like-section{{ post.id }}' action="{% url 'like_post_view' %}" method="POST">
{% csrf_token %}
{% if post.liked_by_user %}
<button type="submit" name="post_id" value="{{ post.id }}" class="like float-left mr-2">
Unlike
</button>
{% else %}
<button type="submit" name="post_id" value="{{ post.id }}" class="like float-left mr-2">
Like
</button>
{% endif %}
</form>

Это домашний вид в views.py - вместо того, чтобы иметь переменную для is_liked и разделять их, вы можете добавить переменную к объекту QuerySet, на которую затем можно ссылаться в шаблоне (показано выше).

def home_view(request):
    posts = Post.objects.all()

    for post in posts:
        print(post)
        print(post.likes.filter(user=request.user).exists())
        if post.likes.filter(user=request.user).exists():
            post.liked_by_user = True
        else:
            post.liked_by_user = False

    context = {'post_list': posts}
    return render(request, 'home.html' , context)

Наконец, я обновил представление AJAX в том же ключе.

def like_post_view(request):
   post = get_object_or_404(Post, id=request.POST.get('id'))

   if post.likes.filter(user=request.user).exists():
       Like.objects.filter(post=post,user=request.user).delete()
       post.liked_by_user = False
   else:
       Like.objects.create(post=post, user=request.user)
       post.liked_by_user = True

   context = {'post': post}

   if request.is_ajax():
       return render(request, 'ajax_postlike.html', context)

   return HttpResponseRedirect(request.META.get('HTTP_REFERER'))

Это работает для меня и обновляет кнопку (то есть форму) при каждом нажатии. Я понимаю, что я удалил некоторые ваши логи фильтрации и других моделей c, но это должно быть легко добавить обратно.