Django& ajax like按钮仅适用于第一项

时间:2017-11-14 16:54:35

标签: javascript jquery python ajax django

早上好,我的按钮问题就出了问题,它只对第一个项目有效,而对其他项目不起作用

这是我的views.py

@login_required
@require_POST
def like(request):
    if request.method == 'POST':
        user = request.user
        slug = request.POST.get('slug', None)
        tweet = get_object_or_404(Tweet, slug=slug)
        if tweet.likes.filter(id=user.id).exists():
            tweet.likes.remove(user)
            message = 'Your disliked this'
        else:
            tweet.likes.add(user)
            message = 'You liked this'
    ctx = {'likes_count': tweet.total_likes, 'message':message}
    return HttpResponse(json.dumps(ctx), content_type='application/json')

当我点击第一个项目上的“赞”按钮时,这样可以正常工作,但是当我点击其他项目中的按钮时这不起作用。

我的models.py

class Tweet(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField('Titulo', max_length=100)
    text = models.CharField(max_length=160)
    slug = models.SlugField(max_length=180)
    likes = models.ManyToManyField(User, related_name='likes')
    created_date = models.DateTimeField(auto_now_add=True)
    updated_date = models.DateTimeField(auto_now=True)

    @property
    def total_likes(self):
        return self.likes.count()

这是我的脚本ajax:

<script type="text/javascript">
$("#like-button").click(function(e){
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: "/like/",
    data: {'slug': $(this).attr('name'), 'csrfmiddlewaretoken': '{{csrf_token}}'},
    dataType: "json",
    success: function(response){
      alert("This tweet has " + response.likes_count);
    },
    error: function(rs, r){
      alert(rs.responseText);
    }
  });
});

</script>

我的html按钮:

    <input
    type="button"
    id="like-button"
    name="{{tweet.slug}}"
    value="Like {{tweet.total_likes}}"
    class="btn btn-primary">

2 个答案:

答案 0 :(得分:3)

如果你有多个输入,你应该使用一个类,而不是id。

<input
type="button"
class="like-button"
name="{{tweet.slug}}"
value="Like {{tweet.total_likes}}"
class="btn btn-primary">

您还必须更新您的ajax:

$(".like-button").click(function(e){

答案 1 :(得分:2)

你有多个按钮,所有按钮都具有相同的ID&#34; like-button&#34;?如果是这种情况,请尝试删除ID,因为从我在代码中看到的内容来看,它并未被使用。 ID始终应该是完全唯一的。拥有多个具有相同ID的元素通常会导致类似的问题。

相关问题