CODEWITHSUNDEEP
javascriptjqueryajaxdjango
zzbil
zzbil

Reputation: 357

Show comments without refreshing

I want to show the comment user posts, right after he posts it.I already made the ajax upload the comment, how can i display it to the user, without refreshing? I have this ajax code:

  $(".comments input[name='post']").keydown(function (evt) {
    var keyCode = evt.which?evt.which:evt.keyCode;
    if (keyCode == 13) {
      var form = $(this).closest("form");
      var container = $(this).closest(".comments");
      var input = $(this);
      $.ajax({
        url: "{% url 'comment' letnik_id=letnik_id classes_id=classes_id subject_id=subject_id %}",
        data: $(form).serialize(),
        type: 'post',
        cache: false,
        beforeSend: function () {
          $(input).val("");
          $(input).blur();
        },
        success: function (data) {
          alert("Successful comment");
          $(input).val("");
          $(input).blur();
        }
      });
    }
  });

This posts the comment. In views.py i save comment:

def comment(request, letnik_id, classes_id, subject_id):
try:
    if request.method == 'POST':
        exam_id = request.POST.get('exam_id')
        exam = get_object_or_404(Exam, id=exam_id)
        comment = request.POST.get('post')
        comment = comment.strip()
        if len(comment) > 0:
            instance = ExamComment(
                exam=exam,
                comment=comment,
                comment_user=request.user)
            instance.save()
            return redirect('subject_id', letnik_id=letnik_id, classes_id=classes_id, subject_id=subject_id)
        html = ''
        for comment in exam.get_comments():
            html = '{0}{1}'.format(html, render_to_string('exam_partial_comment.html', {'comment': comment}))
        return HttpResponse(html)
    else:
        return HttpResponseBadRequest()
except Exception:
    return HttpResponseBadRequest()

Also without: return redirect('subject_id', letnik_id=letnik_id, classes_id=classes_id, subject_id=subject_id) this code, i would get error400 and i wouldn`t get success alert...

Upvotes: 1

Views: 547

Answers (1)

Alex
Alex

Reputation: 1262

First you need JsonResponse function instead of HttpResponse. With JsonResponse, you just pass a dictionary object with the comments you want to update in your page, something like:

from django.http import JsonResponse
if request.method == 'POST':
    #...
    if len(comment) > 0:
        #...saving...
    comments = ExamComment.objects.filter(exams=exams, comment_user=request.user)
    newcomments = {comments:[]}
    for comment in comments:
        newcomments[comments].append(comment) 
    return JsonResponse(newcomments)
else:
    return HttpResponseBadRequest()

This way there is no rendering involved and you return new (and old) comments back to your template. Next you need to rebuild your comment div (which i don't know the name) after the ajax success:

success: function (data) {
      alert("Successful comment");
      $(input).val("");
      $(input).blur();
      var div = document.getElementById('yourCommentDivName');
      newcomments = ''
      for(i;i<data.comments.length;i++){
         newcomments = newcomments + '<p>' + data.comments[i] + '</p>'
      }
      div.innerHTML = div.innerHTML + newcomments;
    }

Well that's it. Comments: code is not tested; If you do this kind of stuff a lot, you should look into some javascript libraries which does this out of the box, as react. Steep learning curve, but once you understand it is a life saver; Last thing is, well, avoid this try except stuff. This makes debugging harder, and is bad for your health in the long run. Do this only if you really really have to, which I don`t think is the case.

Hope it helps!

Upvotes: 1

Related Questions