Django AJAX can't find url

Question:

I’m using AJAX request to delete comment from product page, but django can’t find url (I’m getting this log enter image description here). Box url: path('box/<int:id>', views.box, name='box') , delete url: path('delete-comment/<int:id>', views.delete_comment, name='delete_comment'),. My AJAX call:

comment.addEventListener("click", () => {
        fetch(`delete-comment/${comment.dataset.comment_id}`, {
            method: "DELETE",
            headers: {
                "X-Requested-With": "XMLHttpRequest",
            }
        })
    });

And view:

def delete_comment(request, id):
    if request.headers.get("X-Requested-With") == "XMLHttpRequest":
        if request.method == 'DELETE':
            comment = Comment.objects.get(id=id)
            
            if comment.user == request.user:
                comment.delete()

            return HttpResponseBadRequest('ok')
    else:
        return HttpResponseBadRequest('Invalid request')

I think there is something wrong with url. Why is django looking for /box/delete-comment/id, shouldn’t it look for /delete-comment/id or /box/box-id/comment/id? I tried some options but none of them worked. I also couldn’t find any similar problem. I even can’t identify problem properly. Can you help me?

Asked By: DR4NKR1D3R

||

Answers:

I’m guessing your urlpatterns looks like so:

urlpatterns = [
    path('box/<int:id>', views.box, name='box'),
    path('delete-comment/<int:id>', views.delete_comment, name='delete_comment'),
]

If that’s the case "/box/delete-comment/{id}" doesn’t exist. Instead "/delete-comment/{id}" exists. This can be fixed be adding "box/" at the front of the route for that pattern.

Answered By: Jacinator

In my opinion, you are currently on path "/box". And since you have used absolute url in your ajax call and not put the ‘/’ at the beginning of the url, the url will be appended to the existing urlpattern i.e. ‘/box’ resulting in ‘/box/delete-comment/<some_id>/ instead of ‘delete-comment/<some_id>’.

To Fix the issue, try

comment.addEventListener("click", () => {
        fetch(`/delete-comment/${comment.dataset.comment_id}`, {
            method: "DELETE",
            headers: {
                "X-Requested-With": "XMLHttpRequest",
            }
        })
    });
Answered By: Sanjay Shahi
Categories: questions Tags: , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.