Блог

Я застрял на проблеме, с которой я сталкиваюсь, пытаясь внедрить кнопку «Нравится» в мое приложение django.

У меня есть функциональность, работающая для моделей, и даже в шаблоне html код работает, если я вручную добавляю лайк от пользователя.

Похоже, что проблема может быть в моем Ajax, но я не могу понять, почему.

Вот мой models.py:

 class Post(models.Model):
    direct_url = models.URLField(unique=True)
    post_url = models.URLField()
    post_title = models.CharField(max_length=300)
    time_posted = models.DateTimeField(default=timezone.now)
    user = models.ForeignKey(User, on_delete=models.CASCADE)

class Like(models.Model):
    liker = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='likes')
    date_created = models.DateTimeField(default=timezone.now)

    def save(self, *args, **kwargs):
        super(Like, self).save(*args, **kwargs)
 

И вот мой views.py

 class PostListView(LoginRequiredMixin, generic.ListView):
    model = Post
    template_name = 'homepage/home.html'
    ordering = ['-time_posted']
    context_object_name = 'posts'
    paginate_by = 6

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['now'] = datetime.now()
        context['likesbyuser'] = Like.objects.filter(liker=self.request.user)
        return context


def likePost(request):
    if request.method == 'GET':
        post_id = request.GET['post_id']
        likedpost = Post.objects.get(pk=post_id)  # getting the liked post

        if Like.objects.filter(post=likedpost, liker=request.user).exists():
            Like.objects.filter(post=likedpost, liker=request.user).delete()
        else:
            m = Like(post=likedpost, liker=request.user)  # creating like object
            m.save()  # saves into database
        return HttpResponse(likedpost.likes.count())
    else:
        return HttpResponse("Request method is not a GET")
 

Это часть шаблона, где я размещаю кнопки для использования Ajax, который должен вызывать функцию like:

 {% for i in post.likes.all %}
                    {% if user == i.liker %}
                            <a class='likebutton' data-catid="{{ post.id }}"><i id='like{{ post.id }}' class="btn fas fa-heart fa-lg post-buttons "></i></a>
                    {% elif forloop.last %}
                            <a class='likebutton' data-catid="{{ post.id }}"><i id='like{{ post.id }}' class="btn far fa-heart fa-lg post-buttons "></i></a>
                    {% endif %}

            {% empty %}
                    <a class='likebutton' data-catid="{{ post.id }}"><i id='like{{ post.id }}' class="btn far fa-heart fa-lg post-buttons "></i></a>

            {% endfor %}
{% endfor %}
 

И вот код Ajax, который я добавляю в base.html в тегах скрипта.

 <script type="text/javascript">
$('main').on('click', '.likebutton', function(){
    var catid;
    catid = $(this).attr("data-catid");
$.ajax(
{
    type:"GET",
    url: "/likepost/",
    data:{
        post_id: catid
    },
    success: function(data){

    if(data==0){
        $('.like'   catid).toggle();
        $('#like'   catid).toggleClass("far fas");
        $('#likecount'   catid).html('');
        console.log(data 'if');
    }

    else if(data==1){
        if($('.like'   catid).is(":hidden"))
        {
            $('.like'   catid).toggle();
        }

        $('#like'   catid).toggleClass("far fas");
        $('#likecount'   catid).html(data   ' like');
        console.log(data 'elseif');
    }
    else{

        $('#like'   catid).toggleClass("far fas");
        $('#likecount'   catid).html(data   ' likes');
        console.log(data 'else');
        }
    }

})
});
</script>
 

Я попытался добавить event.preventDefault(); к вызову ajax, но это не решило мою проблему.

Я нашел проблему.

Я указывал код Ajax на «main», как показано в следующем фрагменте:

 ...
<script type="text/javascript">
$('main').on('click', '.likebutton', function(){
...
 

Моя проблема заключалась в том, что я забыл окружить блок основным тегом при переносе этого проекта.

В моем base.html Я добавил следующий код:

 <main role="main" class="container h-100">
    {% block content %}
    {% endblock content %}
</main>
 

Это устранило проблему.