I'm currently working on project 4 network, from cs50w and I have to implement the follow/unfollow button. I defined the URLs, the function in views, the html and the JavaScript code, but I don't understand how to dynamically fetch the user id in JavaScript when I click the follow/unfollow button.

here is my code:

urls.py     path("profile/<int:author_id>/", views.profile, name="profile"),
            path("follow/<int:author_id>/", views.follow, name="follow")

views.py

def follow(request, author_id):
try:
    foo = 'follow'
    logged_user = User.objects.get(id=request.user.id)
    following_user = User.objects.get(id=author_id)
    follower = Follower.objects.get_or_create(follower=logged_user, following=following_user)[1]
    
    a = following_user.id
    if not follower:
        Follower.objects.filter(follower=logged_user, following=following_user).delete()
        foo = 'unfollow'
    all_followers = Follower.objects.filter(following = following_user).count()

except KeyError:
    return HttpResponseBadRequest("Bad request")
return JsonResponse({"foo": foo, "all_followers": all_followers})


profile.html
<center>

<h2>{{ profile_user.username }}</h2>
<h6 ><span id="sp_following">{{ following }}</span> Following</h6>
<h6 ><span id="sp_followers">{{ followers}}</span> Followers</h6>


<div>
    {% if user.is_authenticated and user.id != profile_user.id %}
    <p >
    {% if is_following > 0 %}
        <button id="btnfollow" data-id="{{user_profile.id}}" type="button" >Unfollow</button>
    {% else %}
        <button id="btnfollow" data-id="{{user_profile.id}}" type="button" >Follow</button>
    {%endif%}
    </p>
    {%endif%}
</div>


models.py
class Follower(models.Model):
follower = models.ForeignKey(User, on_delete=models.CASCADE, default=None, related_name="follower_user")
following = models.ForeignKey(User, on_delete=models.CASCADE, default=None, related_name="following_user")


index.js
document.addEventListener('DOMContentLoaded', function () {

if (document.getElementById('btnfollow')) {
    document.querySelector('#btnfollow').addEventListener('click', function (event) {
        fetch(`/follow/${WHAT NEEDS TO BE ADDED HERE?}/`)
        .then(response => response.json())
        .then(data => {
            document.querySelector('#sp_followers').innerHTML = data.all_followers;
            if (data.foo == 'follow') {
                this.innerHTML = 'Unfollow';
                this.className = 'btn btn-primary';
            } else {
                this.innerHTML = 'Follow';
                this.className = 'btn btn-outline-primary';
            }
        })
    })

}

})

In this line of code fetch(`/follow/${???}/`) i tried a bunch of things (ex: this.dataset.id, id, author_id, etc) but none worked. Also if I manually insert an existing (in the DB) id in the URL for example fetch(`/follow/2/`) then it sort of works, but I need it to be dynamically based on the specific user I click.

CodePudding user response：

You can get the user ID in your case in two different ways:

• On click event, assign a function into the onclick handler by passing the dynamic ID by {{user_profile.id}} reference
• Add an event listener, get the tag name by this keyword then access the data-id attribute i.e. this.dataset.id reference

Tip: You need to replace the button ID with the class name cause the id should be unique on the DOM level.