Django ajax comments using Jquery?

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

Blender · Accepted Answer · 2013-06-09 07:05:22Z

6

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);
    });
});

edited Jun 9, 2013 at 7:05

answered May 27, 2011 at 23:07

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nazim Zeeshan Over a year ago

when I inserted the above code into my html the "post"/submit button is not getting pressed. why is it so.?

Blender Over a year ago

Remove the first two lines then. I wrote this by hand, so testing was done whatsoever...

Stefan Manastirliu Over a year ago

You'd better user "submit" event on form instead of "click" on the submit button.

Collectives™ on Stack Overflow

Django ajax comments using Jquery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related