Django, how to update my following list using fetch and PUT in JavaScript?

Viewed 60

I have a method in views.py that adds user to the following list, I'm trying to make it work whenever I click on the button "follow" that I have added in JavaScript

How do I make my Follow button in JavaScript go to my views.py method onclick ?

views.py method.

def follow(request, profile_to_follow):
    try:
        user_to_follow = User.objects.get(username=profile_to_follow)
        user_to_following = Profile.objects.get(user=request.user.id)
    except User.DoesNotExist:
        return JsonResponse({"error": "Profile not found."}, status=404)
    if request.method == "PUT":
        user_to_following.following.add(user_to_follow)
        return HttpResponse(status=204)

urls.py

# API Routes
path("posts", views.compose_post, name="compose_post"),
path("posts/all_posts", views.show_posts, name="show_posts"),
path("posts/<int:post_id>", views.post, name="post"),
path("profile/<str:profile>", views.display_profile, name="profile"),
path("<str:profile_posts>/posts", views.display_profile_posts, name="profile_posts"),
path("follow/<str:user_to_follow>", views.follow, name="follow"),

JavaScript

function load_user_info(user_clicked_on){
    document.querySelector('#page-view').style.display = 'none';
    document.querySelector('#posts-view').style.display = 'none';
    document.querySelector('#show-posts').style.display = 'none';
    document.querySelector('#load-profile').style.display = 'block';

    fetch(`/profile/${user_clicked_on}`)
        .then(response => response.json())
        .then(profile => {
            const profile_element = document.createElement('div');
            const followers = document.createElement('div');
            const following = document.createElement('div');
            const follow_button = document.createElement('button');
            follow_button.innerHTML += "Follow";
            followers.innerHTML = 'Followers: ' + profile.followers;
            following.innerHTML = 'Following: ' + profile.following;
            profile_element.appendChild(followers);
            profile_element.appendChild(following);
            profile_element.appendChild(follow_button);
            profile_element.classList.add('profile_element');
            follow_button.addEventListener("click", () => {
                follow_user(user_clicked_on)
             });
            document.querySelector('#user-profile').appendChild(profile_element);
        });
    document.querySelector('#user-profile').innerHTML = `<h3>${user_clicked_on.charAt(0).toUpperCase() + user_clicked_on.slice(1)} Profile</h3>`;
}

function follow_user(user_to_follow){
    // to make this function work with the one in views.py
    fetch(`/profile/${user_to_follow}`, {
        method: 'PUT',
    })
}
0 Answers
Related