J'essaie actuellement d'ajouter un Ajax à mon bouton J'aime pour éviter de rafraîchir, je ne suis pas un expert J'essaie d'apprendre des erreurs et de petits exercices d'entraînement comme celui-ci mais j'obtiens une erreur:
<!-- Like -->
<div id="like-section">
{% include 'blog/like_section.html' %}
</div>
<!-- Like -->
et je ne sais pas d'où vient l'erreur
Voici le views.py
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
$(document).on('click', '#like', function(event){
event.preventDefault();
var pk = $(this).attr('value');
$.ajax({
type: 'POST',
url: '{% url "blog:like-post" %}',
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);
},
});
});
</script>
Voici le modèle like-section.html
<form action="{% url 'blog:like-post' %}" method="POST" class="like-form" id="{{post.id}}">
{% csrf_token %}
<input type="hidden" name="post_id" value='{{post.id}}'>
{% if user not in post.liked.all %}
<button id="like" class="bwhite sm-button" style="color: grey; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none;">
<i class="far fa-thumbs-up" type="submit"></i>
</button>
{% else %}
<button id="like" class="bwhite sm-button" style="color: blue;background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none;" >
<i class="far fa-thumbs-up" type="submit"></i>
</button>
{% endif %}
<div class="like-count{{post.id}}">{{ post.num_likes }} Likes</div>
</form>
Voici le script
def like_post(request):
user = request.user
if request.method == 'POST':
post_id = request.POST.get('post_id')
post_obj = Post.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 = '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})
return redirect('blog:post-detail', slug=post_obj.slug)
voici le post-details.html
blog.models.Post.DoesNotExist: Post matching query does not exist.
3 Réponses :
Je l'invité post_obj = Post.objects.get(id=post_id) provoque votre exception de code ( https://docs.djangoproject.com/en/3.1/ref/exceptions/#objectdoesnotexist ). Pour conseiller, il existe 2 solutions:
# solution 1
try:
post_obj = Post.objects.get(id=post_id)
except Post.DoesNotExist:
# do something
# solution 2
post_obj = Post.objects.filter(id=post_id).first()
if not post_obj:
# do something
Pour moi, je préfère la solution 2 car elle est plus Pythonique :) en utilisant le principe EAFP ( Quel est le principe EAFP en Python? )
La solution 1 utilise le principe EAFP , pas la solution 2.
Cela doit également être fait, mais l'autre réponse pour obtenir la valeur pk correcte dans JavaScript est ce qui est nécessaire pour que tout fonctionne.
Dans le modèle HTML, vous utilisez des guillemets simples dans le champ masqué. Veuillez le changer en guillemets doubles.
<input type="hidden" name="post_id" value="{{post.id}}">
Tant qu'il ne s'agit pas de XHTML, les guillemets simples fonctionnent très bien. Il est certainement préférable d'être cohérent et d'utiliser toujours des guillemets doubles, mais les guillemets simples ne casseront rien.
Dans votre fonction ajax, la ligne $(this).attr('value') référence au bouton like , pas à l'entrée masquée. Au lieu de cela, vous devez utiliser un sélecteur d'attribut :
$(document).on('click', '#like', function(event){
event.preventDefault();
const pk = $("input[name=post_id]").val();
...
exactement à quelle ligne avez-vous obtenu l'erreur?
je veux juste souligner que toutes les réponses sont trop différentes idk ce qui se passe haha
Vous devez ajouter des instructions de débogage pour diagnostiquer le problème la prochaine fois. Le stacktrace aurait indiqué sur quelle ligne l'erreur s'est produite et vous pouvez ajouter
print()instructionsprint()pour voir quepost_idne contient pas la valeur dont vous aviez besoin. Ensuite, vous pouvez ajouter desconsole.log()dans votre JavaScript pour voir si vous avez récupéré la bonne valeur à transmettre dans le POST.