Django, jquery, and modelforms - ajax

Question

Looking to get some insight and tips on using ajax with django.
Say I have a function:
def add_comment(request, pk):
if request.method == 'POST' and request.is_ajax():
comment_form = CommentForm(request.POST)
if comment_form.is_valid():
comment = comment_form.save(commit=True)
comment.save()
json = simplejson.dumps(comment, ensure_ascii=False)
return HttpResponse(json, mimetype='application/json')
return render_to_response({{ post.id }}', {'comment': comment,}), context_instance=RequestContext(request), mimetype='application/json')
and I'm trying to post the comments to a page without a redirect with ajax function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script></javascript>
<script type="text/javascript">
$(document).click(function()
{
$('#comment_form').submit(function()
{
var dataString = $('#comment_form').serialize();
$.ajax({
type: 'POST',
url: '',
data: dataString,
success: function(data){
$('').html(data);
},
});
return false;
});
});
</script>
I believe I'm mixing up a few things here. I am trying to get the page to load comments without a redirect. I don't need an exact answer, maybe just steered in the right direction.

Answer 1

This can helps:
this could be your view:
import json
def add_comment(request, pk):
if request.method == 'POST' and request.is_ajax():
comment_form = CommentForm(request.POST)
if comment_form.is_valid():
comment = comment_form.save(commit=True)
comment.save()
json_response = json.dumps({"status":"Success"})
return HttpResponse(json_response)
errors = {}
for k, v in job_type_form.errors.items():
errors[k.capitalize()] = v
response = {
'success': False,
'errors': errors
}
return HttpResponse(json.dumps(response))
and your jquery could be like this:
$('#comment_form').submit(function() {
var dataString = $('#comment_form').serialize();
$.ajax({
type: 'POST',
url: '',// you need to put this to something like '{% url to_your_view %}'
data: dataString,
dataType: 'json'
success: function(data){
// you can access to your json object like data.status or data.something
$('').html(data.status);
},
});
return false;
});

Answer 2

Thanks for the posts I finally got things worked out. The jquery was the main issue.
$(document).ready(function() {
$('#comment_form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url art.views.post %}',
data: $('#comment_form').serialize(),
dataType: 'json';
success: function(){
location.reload();
$('#comment_form').get(0).reset();
},
});
return false;
});
});
I was sending the DOM object not the actual form data to the view.
In the view I combined two functions to get the two sharing the same URL.
def post(request, pk):
post = Post.objects.get.(pk=int(pk))
comments = Comment.objects.filter(post=post)
_dict = dict(post=post, comments=comments, form=Comment_form(), user=request.user)
_dict.update(csrf(request))
cf_obj = Comment(post = Post.objects.get(pk=pk))
if request.method == 'POST' and request.is_ajax():
if comment_form.is_valid():
comment = comment_form.save(commit=True)
else:
raise Http404
response = serializers.serialize('json', [comment])
return HttpResponse(response, mimetype='application/json')
return render_to_response('post.html', d)