Попытка сделать кнопку Follow динамической. Добавление функций "Следовать", "Отклонить

Если мы нажмем кнопку follow, она должна обновить количество последователей, затем показать unfollow, и если нажать еще раз, она должна показать follow, уменьшая количество последователей.

urls.py

urlpatterns = [
    path('',views.index, name = 'index'),
    path('signup',views.signup, name = 'signup'),
    path('signin',views.signin, name = 'signin'),
    path('logout',views.logout, name = 'logout'),
    path('settings',views.settings, name = 'settings'),
    path('profile/<str:pk>',views.profile, name = 'profile'),
    path('like-post',views.like_post, name = 'like-post'),
    path('upload',views.upload, name = 'upload'),
    path('follow',views.follow, name = 'follow'),
]

profile.html

<span style="color: white; font-size: 27px;"><b>{{user_followers}} followers</b></span>
<span style="color: white; font-size: 27px;"><b>{{user_following}} following</b></span>
                    
<input type="hidden" value="{{user.username}}" name="follower">
<input type="hidden" value="{{user_objects.username}}" name="user">
{% if user_object.username == user.username%}
<a href = "/settings" data-ripple="">Account Settings</a>
{% else %}
<a data-ripple="">{{button_text}}</a>
{% endif %}

views.py

@login_required(login_url='signin')
def profile(request, pk):
    user_object = User.objects.get(username=pk)
    user_profile = Profile.objects.get(user=user_object)
    user_posts = Post.objects.filter(user=pk)
    user_post_length = len(user_posts)

    follower = request.user.username
    user=pk
    if FollowersCount.objects.filter(follower = follower, user = user).first():
        button_text = 'Unfollow'
    else:
        button_text = 'Follow'

    user_followers = len(FollowersCount.objects.filter(user=pk))
    user_following = len(FollowersCount.objects.filter(follower=pk))
    context = { 'user_object': user_object,
                'user_profile': user_profile,
                'user_posts':user_posts,
                'user_post_length':user_post_length,
                'button_text': button_text,
                'user_followers': user_followers,
                'user_following': user_following
                }

    return render(request, 'profile.html', context)

models.py

class FollowersCount(models.Model):
    follower = models.CharField(max_length=100)
    user = models.CharField(max_length=100)

    def __str__(self):
        return self.user

admin.py

from django.contrib import admin
from .models import Profile, Post, LikePost, FollowersCount
# Register your models here.
admin.site.register(Profile)
admin.site.register(Post)
admin.site.register(LikePost)
admin.site.register(FollowersCount)

Я пробовал добавить '{{button_text}}' в profile.html. Также написал логику представления. Добавил URL в urls.py правильно. Также я приложил код admin.py, models.py. Пожалуйста, проверьте, как я могу сделать кнопку динамической. Она должна обновлять количество подписчиков.

Скриншот кнопки Follow. Нажмите здесь

Поскольку вы хотите сделать это асинхронно, лучшим подходом будет использование вызова Ajax каждый раз, когда кто-то нажимает вашу кнопку follow.

Ajax вызывает request к вашему выделенному url, так что вы можете изменить все, что хотите, в вашей базе данных на основе data, который вы посылаете, не требуя пересоздания страницы. Хорошим руководством, если вы не знаете, как это реализовать, является вот это .

Что касается динамической кнопки, то вам просто нужно использовать js для изменения innerHTML:

function increaseFollows(){
// ajax call should go here
// $.ajax({})
var btn = document.getElementById('follow_btn')
if (btn.innerHTML=='Unfollow'){
btn.innerHTML='Follow'}
else{
btn.innerHTML='Unfollow'}
}
<button type="button" id='follow_btn' onclick="increaseFollows()">Follow</button>

Вернуться на верх