title: Adding Ajax to comments section not Working
body: <p>I am trying to add Ajax to my comment section to avoid the page refreshing every time a comment is added.</p>
  <p>So I load the comments section to the post-details.html from new comments.html and followed the implementing Ajax to posts but my problem is that it is not making any effect and the page needs to refresh to show the new comment</p>
  <p>I have sub-classed Generic DetailView class in views.py and trying to figure out a way to return data in JSON format based on an argument received in the URL. Here's what I have tried doing:</p>
  <pre><code>class PostDetailView(DetailView):
      model = Post
      template_name = &quot;blog/post_detail.html&quot;  # &lt;app&gt;/&lt;model&gt;_&lt;viewtype&gt;.html
  
      def get_context_data(self, *args, **kwargs):
          context = super(PostDetailView, self).get_context_data()
          post = get_object_or_404(Post, slug=self.kwargs['slug'])
          comments = Comment.objects.filter(
              post=post).order_by('-id')
          total_likes = post.total_likes()
          liked = False
          if post.likes.filter(id=self.request.user.id).exists():
              liked = True
  
          if self.request.method == 'POST':
              comment_form = CommentForm(self.request.POST or None)
              if comment_form.is_valid():
                  content = self.request.POST.get('content')
                  comment_qs = None
  
                  comment = Comment.objects.create(
                      post=post, user=self.request.user, content=content)
                  comment.save()
                  return HttpResponseRedirect(&quot;blog/post_detail.html&quot;)
          else:
              comment_form = CommentForm()
  
          context[&quot;comments&quot;] = comments
          context[&quot;comment_form&quot;] = comment_form
          context[&quot;total_likes&quot;] = total_likes
          context[&quot;liked&quot;] = liked
  
          if self.request.is_ajax():
              html = render_to_string('blog/comments.html', context, request=self.request)
              return JsonResponse({'form': html})
          else:
              return context
  </code></pre>
  <p>But this gave me TypeError as it should be:</p>
  <pre><code>TypeError: context must be a dict rather than JsonResponse.
  </code></pre>
  <p>Here is the traceback:</p>
  <pre><code>Traceback (most recent call last):
    File &quot;C:\Users\User\Desktop\Project\venv\lib\site-packages\django\core\handlers\exception.py&quot;, line 47, in inner
      response = get_response(request)
    File &quot;C:\Users\User\Desktop\Project\venv\lib\site-packages\django\core\handlers\base.py&quot;, line 202, in _get_response
      response = response.render()
    File &quot;C:\Users\User\Desktop\Project\venv\lib\site-packages\django\template\response.py&quot;, line 105, in render
      self.content = self.rendered_content
    File &quot;C:\Users\User\Desktop\Project\venv\lib\site-packages\django\template\response.py&quot;, line 83, in rendered_content
      return template.render(context, self._request)
    File &quot;C:\Users\User\Desktop\Project\venv\lib\site-packages\django\template\backends\django.py&quot;, line 59, in render
      context = make_context(context, request, autoescape=self.backend.engine.autoescape)
    File &quot;C:\Users\User\Desktop\Project\venv\lib\site-packages\django\template\context.py&quot;, line 268, in make_context
      raise TypeError('context must be a dict rather than %s.' % context.__class__.__name__)
  </code></pre>
  <p>In the console I am receiving this error:</p>
  <pre><code>GET http://127.0.0.1:8000/blog/blog-4/ 500 (Internal Server Error)  jquery.min.js:2 
  </code></pre>
  <p>Here is the comment section:</p>
  <pre><code>        &lt;!-- Submit Comment --&gt;
          &lt;div class=&quot;container-fluid mt-2&quot;&gt;
              &lt;div class=&quot;form-group row&quot;&gt;
                  &lt;form action=&quot;{% url 'blog:post-comment' post.slug %}&quot; method=&quot;post&quot; class=&quot;comment-form&quot; action=&quot;.&quot;&gt;
                  {% csrf_token %}
                  {{ comment_form.as_p }}
                  &lt;input type=&quot;submit&quot; name=&quot;post_id&quot; value='Submit' class=&quot;btn btn-outline-success&quot;&gt;
  &lt;!--                &lt;button type=&quot;submit&quot; class=&quot;btn btn-outline-success&quot;&gt;Submit&lt;/button&gt;--&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Submit Comment --&gt;
  
          &lt;!-- Show Comment --&gt;
          &lt;button class=&quot;cmt_btn btn btn-outline-info mb-0&quot;&gt;Show / Hide {{comments.count}} Comment{{comments|pluralize}}&lt;/button&gt;
              &lt;div class=&quot;comment-box&quot;&gt;
              {% for comment in comments %}
                  &lt;ul class=&quot;mt-3 list-unstyled&quot;&gt;
                    &lt;li class=&quot;media&quot;&gt;
                      &lt;img class=&quot;rounded-circle article-img&quot; src=&quot;{{ comment.post.author.profile.image.url }}&quot;&gt;
                        &lt;div class=&quot;media-body&quot;&gt;
                        &lt;h5 class=&quot;mt-0 mb-1&quot;&gt;{{comment.user| capfirst}}&lt;small class=&quot;text-muted&quot;&gt;- {{ comment.created}}&lt;/small&gt; &lt;/h5&gt;
                          &lt;hr class=&quot;solid mt-0&quot;&gt;
                           {% if comment.user == user %}
                            &lt;div&gt;
                              &lt;a class=&quot;float-right mr-3&quot; href=&quot;{% url 'blog:delete-comment' comment.id%}&quot;&gt;Delete &lt;/a&gt;
                            &lt;/div&gt;
                          {% endif %}
                          {{ comment.content}}
                        &lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
              {% endfor %}
              &lt;/div&gt;
          &lt;!-- Show Comment --&gt;
  </code></pre>
  <p>Here is the scripts</p>
  <pre><code>    &lt;script&gt;
          $(document).on('submit', '.comment-form', function(event){
            event.preventDefault();
            console.log($(this).serialize());
            $.ajax({
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              dataType: 'json',
              success: function(response) {
                $('.main-comment-section').html(response['form']);
                $('textarea').val('');
              },
              error: function(rs, e) {
                console.log(rs.responseText);
              },
            });
          });
      &lt;/script&gt;
  </code></pre>
  <p>My question is:</p>
  <p>What is the reason for getting this error and how do I fix it?</p>