How to add comments with ajax in django website? - django

Question

How can I add comments in my Django website without refreshing the page?
Here are my codes:
VIEW.PY
#login_required
def comments(request, post_id):
"""Comment on post."""
post = get_object_or_404(Post, id=post_id)
user = request.user
comments = Comment.objects.filter(post=post).order_by('-date')#comment
if request.method == 'POST':#Comments Form
form = CommentForm(request.POST)
if form.is_valid():
comment = form.save(commit=False)
comment.post = post
comment.user = user
comment.save()
messages.success(request, 'Comment has been added successfully.')
return HttpResponseRedirect(reverse('core:comments',args=[post_id]))
else:
form = CommentForm()
template = loader.get_template('post/comments.html')
context = {'post':post,'form':form,'comments':comments,}
return HttpResponse(template.render(context, request))
COMMENTS.HTMl
Form section:
<div class='commentsection' >
<strong>
<form action="{% url 'core:comments' post.id %}" method='post' id=comment-form >
{% csrf_token %}
{% bootstrap_form form %}
</form>
<br/>
<br/>
</strong>
</div>
Comments section:
{% for comment in comments %}
<div class="card mb-3" style="width: 30rem;">
<div class="row no-gutters">
<small> <a style="color: black;" href="{% url 'core:user_profile' comment.user %}"><img src="{{comment.user.profile.profile_pic.url}}" width=50 height=50 class="profile-image img-circle " style="object-fit: cover; float: auto; "><strong style="font-size: 18px;" > #{{comment.user}} </strong></a> </small> <small><span class="glyphicon glyphicon-time"></span> {{ comment.get_date }}</small>
</div>
<div class="card-body" style="width:100%; padding-left:20%; margin-top:-8%; word-break: break-all; color:black; " >
<h5 class="card-text">
{{ comment.comment }}</h5>
<small > Replies [{{comment.total_replies}}] </small
</div>
</div>
</div>
<br/><br/>
{% empty %}
<center>
No commnets
</center>
{% endfor %}
My problems:
Add comments without refreshing the page.
Auto-add newly added comments in the comment section without refreshing the page.
Thanks in advance!

Answer 1

You've correctly surmised that this an AJAX problem, though you could nowadays use a websocket as well. Traditional django solution would be with an AJAX callback.Short of writing it for you, I can offer a pro-forma solution (outline):
Add a view to your site which returns in JSON (or XML or any other serialisable format) a list of new comments from a given datetime (which you pass to the view as a GET param, or POST param if you prefer).
Add Javascript to you page which periodically polls the server with new comment requests. if it gets any returned then it has to dynamically add those comments to the DOM for you.
Your second request, auto-adding new comments, is contingent on whether you want to use a websocket or not. If you use a websocket then yes, the server can inform your page through that socket when new comments arrive. But if you want to stick with AJAX, then it is contingent on the polling interval (which is one big reason websockets were developed and are useful).
There are endless tutorials and how-tos online about writing the Javascript to fetch data and dynamically update the DOM, as there on how to use websockets.