Кнопка Like без обновления страницы с использованием jQuery в Django - PullRequest
1 голос
/ 16 июня 2020

У меня есть точка зрения, которая отлично контролирует мои функции «нравится» и «не нравится». Но я хочу, чтобы авторизованные пользователи могли лайкать страницу без обновления всей страницы. Вот мой код для лучшего понимания ... Заранее спасибо

My View:

def like_post(request):
    user = request.user
    if request.method == "POST":
        post_id = request.POST.get('post_id')
        post_obj = Blog.objects.get(id=post_id)

        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='Dislike'
            else:
                like.value = 'Like'

        like.save()
        return redirect('blog')

Модели:

LIKE_CHOICES = {
    ('Like', 'Like'),
    ('Dislike','Dislike')
} 
class Like(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE,blank=True)
    post = models.ForeignKey(Blog, on_delete=models.CASCADE,blank=True)
    value = models.CharField(choices=LIKE_CHOICES, default='Like', max_length=15)

    def __str__(self):
        return self.user

My HTML

Html
<div class="like-section">
  {% if request.user.is_authenticated %}
  <form action="{% url 'like_post' %}" method="POST">
    {% csrf_token %}
    <input type="hidden" name="post_id" value="{{blog.id}}">
    {% if user not in blog.liked.all %}
    <button class="btn btn-sm btn-info" id="like" type="submit"><i class="fas fa-thumbs-up"></i></button>
    {% else %}
      <button class="btn btn-sm btn-info" id="like" type="submit"><i class="fas fa-thumbs-down"></i> </button>
    {% endif %}
  </form>
  {% endif %}
  </div>
   <small class="like-count{{blog.id}}">{{blog.liked.all.count}} Likes</small>

И напоследок мой jQuery:

<script type="text/javascript">
      $(document).ready(function(event){
        $(document).on('click', '#like', function(event){
            event.preventDefault();
            var post_id = $(this).attr('value');
            $.ajax({
              type:'POST',
              url: '{% url "like_post" %}',
              data:{'id':post_id, 'csrfmiddlewaretoken':'{{csrf_token}}'},
              success: function(data){
                $('#like-section').html(data)
              }
              });
        });
        });  
  </script>

Все еще не понимаю, что делать. Мой код jQuery только останавливает мою кнопку «Нравится», чтобы не нажимать, когда я пытаюсь щелкнуть, кроме этого, ничего более важного, что он делает

Ответы [ 2 ]

0 голосов
/ 03 сентября 2020

Измените свою кнопку на тег привязки, например:

<a href="javascript:" class="btn btn-sm btn-info" data-postid="{{blog.id}}">Like</a>

А затем измените jquery следующим образом:

var post_id = $(this).data('postid');
0 голосов
/ 16 июня 2020

Вы пробовали сделать вашу кнопку такой:

<a class="your custom style" href="javascript:void(0);">ICON</a>
...