title: How to fix Not Found: /blogs/like when adding Ajax to like button
body: <p>I am trying to make the like button in the <code>post_detail.html</code> page clicked without refreshing the page so, I included the like section in a separate HTML called <code>like-section.html</code>. The problem is now I am getting a <code>Not Found: /blogs/like</code></p>
  <p>when I click on the like button and it doesn't change anything when I click it except in the terminal I see this error <code>Not Found: /blogs/like</code></p>
  <p>How do I solve this error and what am I missing</p>
  <p>Here is the model.py</p>
  <pre><code>class Post(models.Model):
      ------------------------------
      liked = models.ManyToManyField(User, default=None, blank=True, related_name='liked')
  </code></pre>
  <p>Here is the views.py</p>
  <pre><code>def like_post(request):
      user = request.user
      post_obj = None
  
      if request.method == 'POST':
          post_id = request.POST.get('post_id')
  
          try:
              post_obj = Post.objects.get(id=post_id)
          except Post.DoesNotExist:
              return JsonResponse({'detail': 'Not found'}, status=404)
          else:
              if user in post_obj.liked.all():
                  post_obj.liked.remove(user)
              else:
                  post_obj.liked.add(user)
  
              like, created = Like.objects.get_or_create(user=user, post_id=post_id)
              if not created:
                  if like.value == 'Like':
                      like.value = 'Unlike'
              else:
                  like.value = 'Like'
              like.save()
              context = {
                  'post_id': post_id,
              }
              if request.is_ajax:
                  html = render_to_string('blog/like_section.html', context,
                                          request=request)
                  return JsonResponse({'form': html})
              elif request.method == 'GET':
                  post_id = request.GET.get('post_id')
                  try:
                      post_obj = Post.objects.get(id=post_id)
                  except Post.DoesNotExist:
                      return JsonResponse({'detail': 'Not found'}, status=404)
  </code></pre>
  <p>Here is the like-section.html</p>
  <pre><code>          &lt;form action=&quot;{% url 'blog:like-post' %}&quot; method=&quot;POST&quot; class=&quot;like-form&quot; id=&quot;{{post.id}}&quot;&gt;
              {% csrf_token %}
              &lt;input type=&quot;hidden&quot; name=&quot;post_id&quot; value='{{post.id}}'&gt;
  
              {% if user not in post.liked.all %}
                &lt;a id=&quot;like&quot; class=&quot;bwhite sm-button&quot; style=&quot;color: grey; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none;&quot;&gt;
                  &lt;i class=&quot;far fa-thumbs-up&quot; type=&quot;submit&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
              {% else %}
                &lt;a id=&quot;like&quot; class=&quot;bwhite sm-button&quot; style=&quot;color: blue;background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none;&quot; &gt;
                  &lt;i class=&quot;far fa-thumbs-up&quot; type=&quot;submit&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
              {% endif %}
              &lt;div class=&quot;like-count{{post.id}}&quot;&gt;{{ post.num_likes }} Likes&lt;/div&gt;
            &lt;/form&gt;
  </code></pre>
  <p>Here is the script</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
          $( document ).ready(function() {
              let display = false
              $(&quot;.cmt_btn&quot;).click(function () {
                  if (display===false) {
                      $(this).next(&quot;.comment-box&quot;).show(&quot;fast&quot;);
                      display=true
                  } else {
                      $(this).next(&quot;.comment-box&quot;).hide(&quot;fast&quot;);
                      display=false
                  }
              });
          });
    &lt;/script&gt;
  &lt;script&gt;
          $(document).on('click', '#like', function(event){
            event.preventDefault();
            var pk = $(this).attr('value');
            $.ajax({
              type: 'POST',
              url: '{% url &quot;blog:like-post&quot; %}',
              data: {'post_id':pk, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
              dataType: 'json',
              success: function(response){
                $('#like-section').html(response['form'])
                console.log($('#like-section').html(response['form']));
              },
              error: function(rs, e){
                console.log(rs.responseText);
              },
            });
          });
    &lt;/script&gt;
  </code></pre>
  <p>Trying to debug it I tried <code>console.log(url)</code> i got <code>{&quot;detail&quot;: &quot;Not found&quot;}</code>
  Here is the urls.py</p>
  <pre><code>    path('blog/&lt;slug:slug&gt;/', PostDetailView.as_view(), name='post-detail'),
      path('blogs/like', like_post, name='like-post'),
  </code></pre>