0

I've checked out many solutions, the 2 below being the most applicable ones:

How to display a comment after posting it without page refresh in django? Django render template in template using AJAX

Below my code. I am able to see the data in the database, so it posts fine, the problem is that after posting it to the database it redirects me to the "partial" template (and it populates that very simple template as expected, with the comment data in it), instead of staying in the current detail page and adding that new comment without refreshing. I have other similar Jquery/ajax functions (to follow or vote users) in this same detail template and they work as expected.

Could anyone please shed light as to why I'm being redirected instead of adding the new comment to the top?

Thanks so much in advance

views.py

def post_commenting(request):
    if request.method == 'POST':
        post_obj = QuestionPost.objects.get(id=63)     
        comment = QuestionComment()
        comment.commenter = request.user
        print(request.POST.get('comment'))
        comment.comment = request.POST.get('comment')
        comment.post = post_obj
        comment.conversation = post_obj.conversation
        comment.save()   
        html = render_to_string( 'conversations/partial/comment.html', {'comment': comment})
        return HttpResponse(html)

detail.html

                    <div class="row" id="commentStyle"> 
                      {% for comment in submitted_comments %}
                        <div class="col-xs-10">
                          {% if comment.post.id == post.id %} 
                            {% include 'conversations/partial/comment.html' %}
                            <p> {{ comment.comment }} submitted {{ comment.created_date|timesince }} ago by <b>{{comment.commenter.displayname|default:"(Deleted)"}} | {{comment.commenter.credibility.group|default:"(Deleted)"}} | {{comment.commenter.date_joined |date:"M Y"|default:"(Deleted)"}} </b>
                              {% if  post.contributor ==  comment.commenter %}
                              <i class="text-info">Commented by contributor</i> <span class="glyphicon  glyphicon glyphicon-user"></span></p> 
                              {% endif %}
                          {% endif %} 
                        </div>
                        {% endfor %}
                    </div>
                    <div> 
                    <form action="{% url 'post_commenting' %}" id='question-comment-form{{post.id}}' method="POST">
                      {% csrf_token %}
                      {{form3|crispy}}
                      <button type="submit" class="btn btn-secondary">Comment</button>
                   </form>
                  </div>

  <script>
    $('#question-comment-form{{post.id}}').on('submit',function(e){
    e.preventDefault();
    const url = $(this).attr('action')
    const comment_text = $(`.question-comment-form${post_id}`).text()

    $.ajax({
      type: 'POST',
      url: url,
      data: {
        'comment': comment_text,
        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
      },

      success: function(response){
          console.log(response);
          $('#commentStyle').html(response)     
      },      
      error: function(response) {
              console.log('error', response)
      }
      });
    });
  </script>

partial/template.html

<div class="col-xs-10">
<p> {{ comment.comment }} submitted {{ comment.created_date|timesince }} ago by <b>{{comment.commenter.displayname|default:"(Deleted)"}} | {{comment.commenter.credibility.group|default:"(Deleted)"}} | {{comment.commenter.date_joined |date:"M Y"|default:"(Deleted)"}} </b>
    {% if  post.contributor ==  comment.commenter %}
    <i class="text-info">Commented by contributor</i> <span class="glyphicon    glyphicon glyphicon-user"></span></p> 
    {% endif %}
</div>

0 Answers0