Converting like button to Ajax powered like button

Question

I am working on a reverse blog project where users can like and comment. Although I successfully implement the like button to work, But it refreshes the page.

My problem is I am trying to convert it to rather use Ajax to power the button. And to as well uses a flag to decide which button to be shown, like or unlike.

Please I need help or the logic to guide me on converting the button to work on using Ajax Please Note: I use pagination and the like button is on the list view and detail view (CBV). Thank you in advance.

here is my view for the button

here is my model

here is my template rendering

Please use code snippets instead of images. – Gerd K May 21 '20 at 06:14 — Gerd K, May 21 '20 at 06:14

Hashir · Answer 1 · 2020-05-22T17:05:18.487

1

Set a unique id for each like button if you have multiple like buttons. Bind the click event to JS function in which you will create an ajax call. Pass the ID of your model object (to increment likes count) to your JS function which will be passed in your ajax call to your view. Specify the URL of your view at which your like increment function resides.

Below is the implementation of ajax call on button click in django

https://stackoverflow.com/a/13733855/11979793

UPDATE: Class based view changes for the ajax

In your class-based view function:

Accept the parameters:


        model_id = json.loads(request.POST.get('param_name')) # model_id could be your post ID to increase the likes

instead of render return JSON response for ajax:

        return JsonResponse({
             'like_count': model_to_dict(total_likes), # if you want to display total likes
             'success': True
             })

You can use total likes in success function of ajax to display it in your template.

P.S. import json at start of the file

UPDATE: example class-based view to handle ajax POST request

class myClassView(View):
    template_name='index.html'
    def post(self,request):  # overriding the post method
        myparam = json.loads(request.POST.get('paramFromAjax'))
        # perform your actions here
        # make a dictionary/context say mydic and pass parameters in that
        return JsonResponse({
             'paramToAjax': mydic,
             'success': True
             })

edited May 22 '20 at 17:05

answered May 20 '20 at 17:51

Hashir

390
5
20

Thank you, i will give it a try tonight, and give you update how it went. – Micheal N.D May 20 '20 at 19:59
return JsonResponse() should i use it inside the CBV or in the post_like function, please. – Micheal N.D May 21 '20 at 17:04
if you ajax type is POST then your post function should return jsonresponse – Hashir May 21 '20 at 17:17
My problem is restructuring the CBV to receive or work with the Ajax call. – Micheal N.D May 21 '20 at 17:54
Working but page still refreshes even after calling event.preventDefault(). – Micheal N.D May 21 '20 at 18:24
Did you remove the action on your Django-template ``form``? Remove the ``type=submit`` from your action button. – Hashir May 21 '20 at 18:42
I have tested it, it works but The problem i am encountering is the cbv ListView is not being updated to reflect the changes from the ajax call. will appreciate if i am bailed out from this. Just confused in what to do should i override the post method, but how? – Micheal N.D May 22 '20 at 16:51
check the updated answer so you might get the idea what you class based view will look like – Hashir May 22 '20 at 17:05
I encountered problems setting unique ID for each like button because they are auto generated. Here might give you a hint. https://cookella.herokuapp.com/blog/ . And i created seperate view for the like button and url so the overrall page is not refreshed and the ListView is not updated. sorry for the troubles. – Micheal N.D May 22 '20 at 17:20
in line 34 where your button is `````` – Hashir May 22 '20 at 18:12

Converting like button to Ajax powered like button

1 Answers1