I am trying to create a like button with ajax.
This is my architecture:
models.py
class Comentario (models.Model):
titulo = models.CharField(max_length=50)
texto = models.CharField(max_length=200)
autor = models.ForeignKey (Perfil, null=True, blank=True, on_delete=models.CASCADE)
fecha_publicacion = models.DateTimeField(auto_now_add=True)
tag = models.ManyToManyField(Tags, blank=True)
slug = models.SlugField(null=True)
likes = models.ManyToManyField(Perfil, blank=True, related_name="likes")
def __str__(self):
return (self.titulo)
@property
def total_likes(self):
return self.likes.count()
def save(self, *args, **kwargs):
self.slug = slugify(self.titulo)
super(Comentario, self).save(*args, **kwargs)
views.py
def like(request):
if request.method == 'POST':
perfil = request.user
slug = request.POST.get('slug', None)
comentario = get_object_or_404(Comentario, slug=slug)
if comentario.objects.filter(id=user.id).exists():
comentario.likes.remove(user)
else:
comentario.likes.add(user)
contexto = {'likes_count': comentario.total_likes }
return HttpResponse(json.dumps(contexto), content_type='application/json')
urls.py
url(r'^like$', login_required(like), name='like'),
html
<input type="button" id="like" name="{{ company_slug }}" value="Like" />
<script>
$('#like').click(function(){
$.ajax({
type: "POST",
url: "{% url 'home:like' %}",
data: {'slug': $(this).attr('titulo'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: "json",
success: function(response) {
alert(response.message);
alert(' likes count is now ' + response.likes_count);
},
error: function(rs, e) {
alert(rs.responseText);
}
});
})
</script>
When I push the button like it does not do anything. The console tells me:
POST htt jquery.min.js:4 p:/127.0.0.1.8000/home/like/404 (not found)
and: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
What is the problem?
#1
As I can see you use jquery-3.2.1.slim.min.js. This (slim) version excludes ajax module!
https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/
Slim build
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules.
#2
You use wrong url as I can see. In your html part it's {% url 'home:listar' %}, given urls.py contains only name='like'
Put JQuery script before ajax code:
<script src="jquery.js"></script>
$('#like').click(function(){
$.ajax({
type: "POST",
url: "{% url 'home:listar' %}",
data: {'slug': $(this).attr('name'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: "json",
success: function(response) {
alert(response.message);
alert(' likes count is now ' + response.likes_count);
},
error: function(rs, e) {
alert(rs.responseText);
}
});
})
</script>