Django Ajax Comment System

Question

I want to create a comment system with using Ajax. My main purpose is getting new comments in my page without page refreshing. I add some js code to my HTML file but it didn't work. Where are my mistakes and what should I do?

views.py

    ...
def post_detail(request, pk, ):
    post = get_object_or_404(Post, pk=pk)
    form = CommentForm(request.POST or None)
    if form.is_valid():
        comment = form.save(commit=False)
        comment.post = post
        comment.save()
        return redirect('post_detail', pk=post.pk)
    context = {
        'post': post,
        'form': form,
    }

    return render(request, 'blog/post_detail.html', context)

comments.html

    {% load crispy_forms_tags %}
{% load static %}
<hr>
<form method="POST" style="width: 50%; margin-left: 20px" id="comment_form">
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" class="btn btn-info" value="Yorum Ekle" style="margin-left: 20px">
</form>

<script type="text/javascript" src="{% static 'js/jquery-1.11.1.min.js' %}"></script>

<script type="text/javascript">

    $(document).on('submit', '#comment_form', function (e) {
        e.preventDefault();
        $.ajax({

                type: 'POST',
                url: 'http://127.0.0.1:8000/post/12/', 
                data: {
                    name: $('#name').val(),
                    content: $('#content').val(),
                    created_date: $('#created_date').val(),
                    post: $('#post').val(),
                    csrfToken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function () {
                    alert("YEAH! It works!");

                }
           }
        )
    })
</script>

post_detail.html

...

    {% include 'blog/comment.html' %}
        <hr>
        {% for comment in post.comments.all %}

            <h4>{{ comment.name }} | <small>{{ comment.created_date|timesince }} önce</small></h4>
            <p>{{ comment.content|linebreaks }}</p>
        {% endfor %}

urls.py

...
        url(r'^post/(?P<pk>\d+)/$', views.post_detail, name='post_detail'),

When I click comment button there is no action. But when I look inspect elements, when I click button it shows Status code:403

Note: I get "YEAH! It works!" alert

Answer 1

The success function takes an argument, which is the data sent back by the server.

Update your code like this:

success: function (result) {
    alert("YEAH! It works!");
}

Answer 2

You need to return a JsonResponse or a partial template in post_detail method so that you can use these data in ajax success function. I have created a django app for commenting system using ajax response for preventing page refresh. If you are interested Here the package repo