How to run a method inside a Model when a JavaScript actionListener is triggered?

manpreet Best Answer 2 years ago

I have the next Model:

class Post(models.Model):
    author = models.ForeignKey('auth.User', on_delete=models.CASCADE)
    title = models.CharField(max_length = 200)
    text = models.TextField()
    created_date = models.DateTimeField(default = timezone.now)
    likes = models.IntegerField(default=0)
    tags = models.CharField(max_length = 50, default = '' )

    def process_likes(self):
        like = self.likes = F('likes')+1
        like.save()

    def split_tags(self):
        return self.tags.split()

    def get_absolute_url(self):
        return reverse('blog:post_list')

    def __str__(self):
        return self.title

What I want to do is when a icon in a template is clicked, I want the process_likes method to be run, this method is going to increment by one the value of likes. My script looks like this:

<script>
    let corazon = document.querySelector('.icon-heart-empty');
    corazon.addEventListener('click', ()=>{
        corazon.classList.toggle('icon-heart');
    });
script>

Here I toggle the class of my icon to show if is clicked or uncliked, but how can I call the process_like method using pure JavaScript?

manpreet 2 years ago

You would need to use an AJAX call to send a POST request to your server, and then return a response to your HTML page.

Example:

view

def process_like(request):
    post_id = request.POST['post_id']
    post = Post.objects.get(id=post_id)
    post.process_likes()
    return JsonResponse({"message": "Success"})

urls

urlpatterns = [
    ...
    path('process_like/', views.process_like, name="process_like")
    ...
]

html/js

<div class="post" data-post-id="{{post.id}}">this is the postdiv>

<script>
var posts = document.querySelectorAll('.post')

posts.forEach(post => {
    post.addEventListener('click', e => {
        e.preventDefault()
        var post_id = post.getAttribute('data-post-id')
        var config = {
          method: "POST",
          body: {post_id: post_id}
          headers: {
              "X-CSRFToken": "{{ csrf_token }}",
              "Accept": "application/json",
              "Content-Type": "application/json"
          },
        }

        fetch('{% url "process_like" %}', config)
        .then(response => response.json())
        .then(data => console.log(data))
    })
})
script>

Or if you use jQuery

<script>
$('.post').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var post_id = $this.data('post-id');

    $.ajax
                                                    

                                                                                                                
                                                        
                                                    
                                                    

                                                        

                                                            0
                                                                views   0
                                                                    likes    
                                                                0 shares
                                                                                                                                


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp