How to display a comment after posting it without page refresh in django?

Question

What I am trying to do ?

I am trying to display a comment after posting it without page refresh.

What is the problem ?

I am able to successfully post the comment but I am not able to display it without page refresh.

My code:-

html

// This is where you can write a comment.
<form id='articleCommentForm'>{% csrf_token %}
   <textarea placeholder='write comment'></textarea>
   <button type="submit"> Comment </button>
</form>

// This is where previous comments get displayed
{% for comment in comments %}       
<br /> <br />
<div class="row" class="commentStyle">                  
  <div class="col-xs-10">
    <span class="userName"> {{ comment.user }} </span>
    <br /> <br />
    <div class="comment-box">
        <textarea class="form-control" readonly> {{ comment.text }} </textarea>
    </div>                      
    <br />
    <div class="row">
        <div class="col-xs-6">
            <span class="comment-footer-text"> {{ comment.date }} </span>
        </div>
        <div>
            <div class="comment-control">
                <span> {{ comment.likes }} </span>
                <span></span>
            </div>                                      
        </div>
    </div>                      
  </div>
</div>
{% endfor %}

ajax

$('#articleCommentForm').on('submit',function(e){
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/articles/postComment/',
    data: {
       'comment': $('#articleCommentForm textarea').val(),
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    dataType: 'json',
    success: function(data){
       var comment = JSON.parse(data['comment']);           
       $('.commentStyle .userName').val(comment.user);
       $('.commentStyle textarea').val(comment.text);
       $('.commentStyle .comment-footer-text').val(comment.date);
       $('.commentStyle .comment-control span:first-child').val(comment.likes);        
   }
  });
)};

views.py

def postComment(request):
    if request.user.is_authenticated():         
       comment = Comment()
       comment.user = request.user
       comment.text = request.POST.get('comment')
       comment.date = datetime.now()    
       comment.save()       
       curComment = serializers.serialize('json', [comment])    
       data['comment'] = curComment
    return JsonResponse(data)

Any help would be highly appreciated.

Where is the rest of your JS? What is that `.ajax()` call connected to? — Daniel Roseman, Apr 03 '18 at 12:44
Its connected to `#articleCommentForm` I edited the ajax part of my question take a look. — Ahtisham, Apr 03 '18 at 13:06
It throws an error `parseerror-SyntaxError: Unexpected token < in JSON at position 0` I think its because of not returning a json response from the view. — Ahtisham, Apr 03 '18 at 16:32

score 2 · Accepted Answer · edited Apr 09 '18 at 11:11

For this functionality we should take a new partial template to render the comment and return the rendered html to be added to the HTML DOM.

single_comment.html

  <div class="col-xs-10">
    <span class="userName"> {{ comment.user }} </span>
    <br /> <br />
    <div class="comment-box">
        <textarea class="form-control" readonly> {{ comment.text }} </textarea>
    </div>                      
    <br />
    <div class="row">
        <div class="col-xs-6">
            <span class="comment-footer-text"> {{ comment.date }} </span>
        </div>
        <div>
            <div class="comment-control">
                <span> {{ comment.likes }} </span>
                <span></span>
            </div>                                      
        </div>
    </div>                      
  </div>

views.py

from django.shortcuts import render

def postComment(request):
    if request.user.is_authenticated():         
       comment = Comment()
       comment.user = request.user
       comment.text = request.POST.get('comment')
       comment.date = datetime.now()    
       comment.save()       
    return render(request, 'partial/comment.html', {'comment': comment})

ajax

$.ajax({
    type: 'POST',
    url: '/articles/postComment/',
    data: {
       'comment': $('#articleCommentForm textarea').val(),
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    dataType: 'json',
    success: function(data){
         $('.commentStyle').append(data)     
   }
});

I need to use template tag `for loop` because I have to display the previously posted comments too. — Ahtisham, Apr 03 '18 at 11:32
@Ahtisham take a partial template(`single_comment.html`) and render it. Not the actual template. — anjaneyulubatta505, Apr 03 '18 at 13:40
It throws an error `parseerror-SyntaxError: Unexpected token < in JSON at position 0` — Ahtisham, Apr 03 '18 at 16:34
Thanks a lot.. I had to change It to `$(".commentStyle:first").append(data);` otherwise it was adding it to all the previous comments. Btw thanks again. — Ahtisham, Apr 03 '18 at 16:46

How to display a comment after posting it without page refresh in django?

1 Answers1

Linked