Django ajax comments using Jquery? - django

Question

I want to implement a ajax commenting system.
urls.py:
(r'^comment/(\d+)/$', comments),
views.py:
def comments(request,feed):
if request.method == 'POST':
feed=Feed.objects.get(pk=feed)
form = CommentForm(request.POST)
if form.is_valid():
comment, created = Comment.objects.get_or_create(
feed=feed,
msg=form.cleaned_data['msg'],
ip=request.META['REMOTE_ADDR']
)
comments=Comment.objects.filter(feed=feed)
form=CommentForm()
variables=RequestContext(request,{'comments': comments,'feed': feed,'form':form,})
if 'HTTP_REFERER' in request.META:
return HttpResponseRedirect(request.META['HTTP_REFERER'])
return render_to_response('comment_page.html', variables )
#return HttpResponseRedirect('/view/')
else:
form=CommentForm()
feed=Feed.objects.get(pk=feed)
comments=Comment.objects.filter(feed=feed).reverse()
variables=RequestContext(request,{'comments': comments,'feed': feed,'form':form,})
return render_to_response('comment_page.html', variables )
Templates:
<div id="commentbox" style="display:none;">
<form class="comment" method="post" action="/comment/{{feed.id}}/">
{{cform.as_p}}
<input class="post" type="submit" value="post" />
</form>
</div>
</br>
<h3></h3><button class="ccc">Show/Hide Comment</button> {{feed.comment_set.count}} Comments
<div id="commentlist" class="commentlist" style="padding-left:10px;"><ul style="list-style-type:square;">
{% for c in feed.comment_set.all %}
<li>{{c.msg}}</li>
{% endfor %}
</ul>
</div>
What code should I include to add comments into commentlist li field without page refresh. I am new in ajax. Please help. Thanks

Answer 1

Here's what I would do:
Leave the HTML as it is, as it works for people without JavaScript. In you JavaScript, when the user submits the form, stop it from actually happening:
$('#commentbox form').submit(function(e) {
e.preventDefault();
});
Now, when the button is pressed, prevent the default behavior and submit the form via AJAX:
$('#commentbox form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: $(this).parent().attr('action'),
data: $(this).parent().serialize(),
}).done(function(data) {
alert('The AJAX is done, and the server said ' + data);
});
});