У меня возникли проблемы с моим кодом восстановления JQuery-Ajax

Question

В моем проекте можно поднимать сообщения. Это отлично работает, когда я не использую JQuery-Ajax. Однако он перезагружает страницу, и я не хочу этого.

Я реализовал некоторые Jquery-Ajax сделать запрос POST, и обновить кнопку, чтобы сказать upvoted. К сожалению, это приводит к тому, что все записи в списке будут сохранены, а не только те, которые я нажал.

Позвольте мне показать вам HTML (внутри списка пост для цикла):

{% for post in posts %} 
{{ post.title }} 
<hr> 
{{ post.content }} 
{% with user=request.user %} 
    <a class="upvote" data-postid="{{ post.id }}" href='#' > 
     <span class="btn btn-primary" aria-hidden="true"> 
      Upvote | {{ post.followers }} 
     </span> 
    </a> 

     {% endwith %} 
     {% endfor {% 

Это был HTML для upvote и upvoted кнопок.

Вот мой Jquery скрипт:

<script src="{% static 'posts/jquery-3.1.1.js' %}"></script> 

<script type="text/javascript"> 
$(".upvote").click(function(event){ 
var postid = $(this).data('postid'); 
$.ajax({url: "/activity/follow/10/{{ post.id }}?next={{ request.path }}&postid=" + postid, success: function (data) { 
    event.preventDefault(); 

    $(".upvote").addClass('hidden'); 

    } 


}); 

}); 
    </script> 

Подводя итог, как я вызываю эту функцию, чтобы голосовать только на почте, что я нажимаю, вместо upvoting каждый один в списке ? Благодаря!

Answer 1

Вы должны поместить переменную postid в URL-адрес контроллера, а не {{post.id}}. Код Javascript не должен находиться в цикле, поэтому он не имеет доступа к переменной post.

$(".upvote").click(function(event){ 
    event.preventDefault(); 
    var postid = $(this).data('postid'); 
    var $this = $(this); 
    $.ajax({ 
     url: "/activity/follow/10/" + postid + "?next={{ request.path }}", 
     success: function (data) { 
      $this.addClass('hidden'); 
     } 
    }); 
});