Add Like button with Django + Ajax

Hi I create my first project like *(question-answer). I used this guid from Tango with Django http://www.tangowithdjango.com/book17/chapters/ajax.html to add like button with ajax. And nothing hapened. Don't see any request in console. I'm noob in Django, and it's my first encounter with jquery.

嗨，我创建了我的第一个项目，如*（问答）。我使用Tango和Django http://www.tangowithdjango.com/book17/chapters/ajax.html中的这个guid来添加带有ajax的按钮。没有什么可恶的。在控制台中看不到任何请求。我是Django的菜鸟，这是我第一次遇到jquery。

apps/questions/models:

class Answer(models.Model):

    text = models.TextField()
    date = models.DateTimeField(default=datetime.datetime.now)
    likes = models.IntegerField(default=0)
    resolve = models.IntegerField(default=0)
    author = models.ForeignKey(CustomUser)
    question = models.ForeignKey(Question)

apps/questions/views:

@login_required
def add_like(request):

    ans_id = None
    if request.method == 'GET':
        ans_id = request.GET['answer_pk']

    likes = 0
    if ans_id:
        ans = Answer.objects.get(id=(int(ans_id)))
        if ans:
            likes = ans.likes + 1
            ans.likes = likes
            ans.save()

    return HttpResponse(likes)

apps/questions/ulrs: 
url:
   url(r'add_like/$', views.add_like, name='add_like'),

 question.html:
    {% for answer in answers %}
    <div class="container-fluid no-padding">
        {{ answer.text }}   
    </div>
    <div class="container-fluid  author-question">
    <p>posted: {{ answer.date.day|stringformat:"02d" }}.{{ answer.date.month|stringformat:"02d"}}.{{ answer.date.year}}</p>
    <p>by: {{ answer.author.username }}</p>
    </div>
    {% if user.is_authenticated %}
    <button class="btn btn-default" type="button" id="likes" data-ansid="{{ answer.id }}">
        like | <strong id="like_count">{{ answer.likes }}</strong>
    </button>
    {% endif %}

js/ajax.js:

    $('#likes').click(function(){
    var ansid;
    ansid = $(this).attr("data-ansid");
            $.get('/questions/add_like/', {answer_id: ansid}, function(data){
        $('#like_count').html(data);
    $('#likes').hide();
});
});

1 个解决方案

#1

Since you are creating buttons in a for loop, and naming them the same way, you have multiple elements on the page with the same id. Because of this you get unpredictable results. You should either give each button its own id, or change the jQuery selector to select the buttons based on the appropriate class.

由于您在for循环中创建按钮，并以相同的方式命名它们，因此页面上的多个元素具有相同的ID。因此，您会得到不可预测的结果。您应该为每个按钮指定自己的id，或者更改jQuery选择器以根据相应的类选择按钮。

For example, you could have:

例如，您可以：

{% for answer in answers %}
    <div class="container-fluid no-padding">
        {{ answer.text }}   
    </div>
    <div class="container-fluid  author-question">
    <p>posted: {{ answer.date.day|stringformat:"02d" }}.{{ answer.date.month|stringformat:"02d"}}.{{ answer.date.year}}</p>
    <p>by: {{ answer.author.username }}</p>
    </div>
    {% if user.is_authenticated %}
    <button class="btn btn-default likes-button" type="button" data-ansid="{{ answer.id }}">
        like | <strong id="like_count">{{ answer.likes }}</strong>
    </button>
    {% endif %}
{% endfor %}

And then for the javascript

然后为javascript

$('.likes-button').click(function(){
    var ansid;
    ansid = $(this).attr("data-ansid");
            $.get('/questions/add_like/', {answer_id: ansid}, function(data){
        $('#like_count').html(data);
    $('#likes').hide();
});
});

#1