Can not get comment id with AJAX in django

Question

I'm fighting with this problem during several days and can not find the solution for my case. I'm trying to make system of likes without refreshing the page. In synchronous mode system of likes and dislikes works fine, but when I'm trying to add AJAX, I'm getting 405 and only one last comment is working for one click, I understand problem that Ajax doesn't understand django urls with id or pk like my variant {% url 'store:like' comment.pk %} , but how it can be solved?

There is this part from the template:

{% for comment in comments %}
       <h6 class="card-header">
       {{ comment.author }}<small> добавлен {{ comment.created_at|date:'M d, Y H:i' }} </small>
       </h6>
        <div class="card-body">
        <h4>{{ comment }}</h4>
        <form id="like-{{comment.pk}}" method="POST" action="{% url 'store:add_like' comment.pk %}">
                    {% csrf_token %}

                    <button style="background-color: transparent; border: none; box-shadow: none;" type="submit">
                        <a class="btn btn-success" id="like-count-{{comment.pk}}"> Likes {{ comment.likes.all.count }}</a>
                    </button>
                </form>
        

        </div>
        {% empty %}
        <p>Для данного товара  ещё нет комментариев.</p>

        {% endfor %}

my ajax call in the same template:

<script type="text/javascript">
    $(document).ready(function(){

        

  $('[id^="like-"]').submit(function(e){

            e.preventDefault();
            var endpoint = $(this).attr('action');
            var serializedData = $(this).serializeArray();
      $.ajax({
               type: 'POST',
               url: endpoint,
               data: serializedData,
               success: function(response) {
                     $( "#like-count-"+response["id"].toString()).text("Likes "+response["like_count"]);

                },
                error: function(rs, e) {
                       alert(rs.responseText);
                }
          });
    })

This part from urls:

path('products/<int:pk>/like/', addlike, name='like'),

View for like:

@api_view(['POST'])
def addlike(request, pk, *args, **kwargs):

        is_ajax = request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
        if request.method == 'POST' and is_ajax:
            
            post = Comment.objects.get(pk=pk)


            is_dislike = False

            for dislike in post.dislikes.all():
                if dislike == request.user:
                    is_dislike = True
                    break

            if is_dislike:
                post.dislikes.remove(request.user)

            is_like = False

            for like in post.likes.all():
                if like == request.user:
                    is_like = True
                    break

            if not is_like:
                post.likes.add(request.user)

            if is_like:
                post.likes.remove(request.user)

            all_post_likes = post.total_likes() (function from models)
            return JsonResponse({"success": True, "like_count": all_post_likes, "id": pk}, status=200)
        else:

            return JsonResponse({"success": False}, status=400)

How to force AJAX to call in pk what I need? (Finally I found the solution, updated the final version of the code)

zankoAN · Accepted Answer · 2022-01-09T09:39:19.923

1

Remove the ‍data-url‍ and set the action attribute because when you click the submit button, by default this POST request will be sent to the current URL and you will receive the 405 status code, but if you set action this POST request will be sent to the like url:

<form id="like" method="POST" action="{% url 'store:like' comment.pk %}">
    {% csrf_token %}
     <input type="hidden" value="{{comment.pk}}" name="id">
     <input type="hidden" name="next" value="{{ request.path }}">
     <button style="background-color: transparent; border: none; box-shadow: none;" type="submit">
     <a class="btn btn-success" id="like"> Likes {{ comment.likes.all.count }}</a>
     </button>
</form>

And in js you can get the URL like this

var endpoint = $(this).attr('action');

Update

All forms have the same "ID" and therefore only the first one is executed and the rest of the forms are not managed by Ajax, to solve this problem you can give different ID to the forms(This condition also applies to a tags):

<form id="like-{{comment.pk}}" method="POST" action="{% url 'store:like' comment.pk %}">
     {% csrf_token %}
     ........
     .....
     <a class="btn btn-success" id="likes-count-{{comment.pk}}"> Likes {{ comment.likes.all.count }}</a>

And you can receive events this way and update the number of likes.

$(document).ready(function(){
  $('[id^="like-"]').submit(function(e){
    e.preventDefault();
    var endpoint = $(this).attr('action');
    var serializedData = $(this).serializeArray();
     
    $.ajax({
       url: endpoint,
       method: "POST",
       data: serializedData,
       success: function(response){
         $("#likes-count-" + serializedData[1].value).text("Likes "+response["like_count"]);
       }
    });
  })
});

in the view you should return the new number of the likes :

return JsonResponse({"success": True, "like_count": new_like_count}, status=200)

And in the success function you can access to the new number by the response and now we change the text value of a tag to change the like count number.

^= means: selects elements that have the specified attribute with a value beginning exactly with a given string. attributeStartsWith1

edited Jan 09 '22 at 09:39

answered Jan 08 '22 at 10:24

zankoAN

327
2
6

I did, but still "XHRPOSThttp://127.0.0.1:8000/products/433/like/" response returns only for the last comment on page and doesn't want to work for other, actually I have one another action for dislike, can there be some misunderstandings between two actions? Or I need to separate It by another name? – Алексей sk1p Jan 08 '22 at 11:11
It started to work better !) I can click now every comment.pk, but still persists one issue, when I click button like it should be decreased if it was liked before, but in this case I received error "The view store.views.addlike didn't return an HttpResponse object." So as I understand it starts to work in old synchronous mode in this case, but I don't know why. Also I did some changes in view, right now it gets pk parametr: ``` def addlike(request, pk, *args, **kwargs): and removed " pk = request.GET['id'] pk = request.POST.get('id')" ``` – Алексей sk1p Jan 08 '22 at 13:45
1

In each view, you must return a response. Here, the error tells you don't return HttpResponse. After you increase or decrease the number of likes, you must return the JsonResponse which contains the new number of likes and then you get it from success function in Ajax and you can replace the button value with a new value(new like number). – zankoAN Jan 08 '22 at 14:19
Thank you! I think I got what you meant, I will add JsonResponse with amount of current likes/dislikes for Ajax, but JS code still awful problem for me, could you advice what function should be used in success section? – Алексей sk1p Jan 09 '22 at 05:38
1

All `` tags have the same `ID` and are difficult to change, to solve this you still have to create distinct `ID`, make sure that they are not the same as the form's `ID`, for example ` ` can be a good choice, then inside the Ajax convert `serialize` to `serializeArray ()` (because i want access to the `id`) and then inside the success function change the value of the `` tag(to change like count) like this: `$("#like-count-" + serializedData[1].value).text("Likes " + response["like_count"]);`And now it should work properly. – zankoAN Jan 09 '22 at 08:51
I'm trying to sort out and nothing appear on my page. If I use "$('#main').load(' #main', function(){}); in success I see new like, but somehow after that it works only for one like and then I get Bad Request 400, previously it works with posting of form without refreshing, I will try to realize with your instructions and without "$('#main').load, but very hard at this time) – Алексей sk1p Jan 09 '22 at 12:05
Finnaly I did it!) Updated my current code. With some changes, but according to your advices, thanks ! – Алексей sk1p Jan 09 '22 at 18:23

Super sub · Answer 2 · 2022-01-08T09:48:42.313

0

I think you should send the csrf_token with the ajax request add headers: { "X-CSRFToken": token } to your ajax request, "token is the csrf_token" or add @csrf_exempt decorator to your function but it will keep your view unsafe against CSRF attacks.

you can find more info here https://docs.djangoproject.com/en/4.0/ref/csrf/

edited Jan 08 '22 at 09:48

answered Jan 08 '22 at 09:41

Super sub

269
2
8

I have already tried, but it won't help, I guess some another problem here – Алексей sk1p Jan 08 '22 at 11:05

Can not get comment id with AJAX in django

2 Answers2

Update