Django for-loop активирует просмотр несколько раз, когда нажимается кнопка

Question

Я работал над чем-то из сайта блога, и на нем, конечно, вы отправляли вещи. У меня есть index.html, где у меня есть:

{% for post in posts %} {% include "blog/featuredpost.html" %} {% endfor %} 

Я также использовал разбивку на страницы Django. Теперь, что я хочу сделать, это кнопка типа «нравится» и «не нравится», которая многократно используется, что означает, что я, вероятно, захочу ее в «blog/featuredpost.html». Итак, вот что я сделал.

<div class="row"> 
<div class="col-sm-5"> 
    <div id="divLikes" class="col-sm-6 bg-success text-center"> 
     Likes: {{ post.likes }} 
    </div> 
    <div id="divDislikes" class="col-sm-6 bg-danger text-center text-block"> 
     Dislikes: {{ post.dislikes }} 
    </div> 
</div> 
{% if user.is_authenticated %} 
<div> 
    <div class="col-sm-2"> 
     <form id="like_form" action="" method="POST"> 
      {% csrf_token %} 
      <button id="like_button" type="submit" value="vote" class="btn btn-success btn-sm btn-block"> 
       <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Like 
      </button> 
     </form> 
    </div> 
    <div class="col-sm-2"> 
     <button type="button" class="btn btn-danger btn-sm btn-block"> 
      <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Dislike 
     </button> 
    </div> 
    <div class="col-sm-3"> 
     <button type="button" class="btn btn-warning btn-sm btn-block"> 
      <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Comment 
     </button> 
    </div> 
</div> 
{% endif %} 

---

<script type="text/javascript"> 
     //$('#like_button').click(function(){ }); 
/* The for cycle sends all the posts id that should appear on the page. 
It should send just the one on which the like button is clicked. */ 
$(document).on('submit', '#like_form', function(event) { 
event.preventDefault(); 
$.ajaxSettings.traditional = true; 
$.ajax({ 
    type: 'POST', 
    url: '{% url "like" %}', 
    dataType: 'json', 
    data: { 
     csrfmiddlewaretoken: '{{ csrf_token }}', 
     LikeId: {{ post.id }}, 
    }, 
    success: function(response) { 
     $('#divLikes').load(' #divLikes', function() { 
      /* It's important to add the space before #divLikes, I don't know why */ 
      $(this).children().unwrap() 
     }) 
    } 
}); 

})

views.py

def view_like(request): 
# AJAX Like Button 
if request.user.is_authenticated: 
    if request.method == 'POST': 
     likepostId = request.POST.get('LikeId', '') 
     print(likepostId) 
     likepost = get_object_or_404(Post, id=likepostId) 

     print(likepost.title + " has " + str(likepost.likes)) 

     response_data = {} 
     return JsonResponse(response_data) 
else: 
    raise Http404 

return 200 

В настоящее время я его так, что бы просто распечатать некоторые вещи. На первой странице он просто реплицирует часть html/css из-за функции успеха AJAX. Как я могу сделать, как кнопка, специально знать, что я хочу, чтобы на определенном посту, на который я нажал? Потому что, как и сейчас, он просто рассылает все идентификаторы всех других сообщений на странице, в определенном порядке.

Answer 1

Проблема в том, что у вас есть куча узлов с одинаковым идентификатором (#like_form и #like_button), и вы добавляете событие ко всем из них. Нельзя иметь несколько элементов с одинаковым значением id. Удалить атрибут id из form, изменить button «ы id к class, и установите его значение идентификатора поста, т.е. .:

<button type="submit" value="{{ post.id }}" class="vote_button btn btn-success btn-sm btn-block"> 

затем подключить событие к классу .vote_button, и представить его значение (так data.LikeIdajax в вашем запросе будет что-то вроде $(event.target).val()) на idenfity должность которого вы проголосовали один

редактировать:

тыс e javascript примерно будет выглядеть так:

<script type="text/javascript"> 
$(".vote_button").click(function(event) { 
    event.preventDefault(); 
    $.ajaxSettings.traditional = true; 
    $.ajax({ 
     type: 'POST', 
     url: '{% url "like" %}', 
     dataType: 'json', 
     data: { 
      csrfmiddlewaretoken: '{{ csrf_token }}', 
      LikeId: $(event.target).val(), 
     }, 
     success: function(response) { 
      /* I am not sure what is this supposed to do 
       load() expects url as the first parameter, not a node 
      */ 
      $('#divLikes').load('#divLikes', function() { 
       $(this).children().unwrap() 
      }) 
     } 
    }); 
}); 
</script>