Add Like button with Django + Ajax

Question

Hi I create my first project like stackoverflow(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.

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();
});
});

yes, in my "head.html" that include "base.html" <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> <script src="{% static 'js/ajax.js' %}"></script> — Ivan Semochkin
– Ivan Semochkin, Commented Oct 10, 2015 at 21:31
No, I'm asking if it got properly loaded on your page? Check the source of the loaded page. If it is, check the browser console to see what's happening. Whether the request is being made or not. — zanderle
– zanderle, Commented Oct 10, 2015 at 21:38
yes, it's loaded <script src="/static/js/ajax.js"></script> i check in browser, and nothing hapened in neetwork page, when i clicked button — Ivan Semochkin
– Ivan Semochkin, Commented Oct 10, 2015 at 21:47
Hm, try copy pasting the code into the console and click the button then. Does anything happen? — zanderle
– zanderle, Commented Oct 10, 2015 at 22:00

zanderle · Accepted Answer · 2015-10-11 10:33:03Z

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 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

$('.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();
});
});

answered Oct 11, 2015 at 10:33

zanderle

8255 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

zanderle Over a year ago

Have you tried without the trailing slash in urls.py? You are also going to have to correct the GET parameter - in ajax.js you are passing answer_id and in add_like view you are expecting answer_pk

Ivan Semochkin Over a year ago

i change code, like you say. it customise like-button, now when i paste js code in console, I see 404: GET 127.0.0.1:8000/apps/questions/add_like/?answer_id=12 404 (NOT FOUND) Maybe I have problem with view? request.GET don't recieve "answer_id"

zanderle Over a year ago

Also, it is possible you included your questions/urls.py at a different url. Can you update your question with the main urls.py?

Ivan Semochkin Over a year ago

i change in view to "answer_id", try without slash in urls, still doesn't work. In console "answer_id" display correct

Ivan Semochkin Over a year ago

u right, problem probably with urls. I update questions with main urls.py. Still doesn't work. Console recieve 127.0.0.1:8000/apps/questions/add_like/?answer_id=9 . but I'm on the page 127.0.0.1:8000/questions/get/15

|

Collectives™ on Stack Overflow

Add Like button with Django + Ajax

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related