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 thedata-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.