#javascript #django #ajax #django-templates
#javascript #django #ajax #django-шаблоны
Вопрос:
Я застрял на проблеме, с которой я сталкиваюсь, пытаясь внедрить кнопку «Нравится» в мое приложение 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, но это не решило мою проблему.
Ответ №1:
Я нашел проблему.
Я указывал код 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>
Это устранило проблему.