前提
DJANGOでSNSアプリを作成しています。
フォローボタンをajaxの非同期通信を利用して実装中なのですが、
ボタンを押す前の状態が意図した動きにならず、困っています。
※ajaxの設定については正常に動作しているため、コード記載しておりません。
期待する動作
フォロー状態 | フォローボタン押下前 |
---|---|
フォロー済み | 「フォロー中」が表示される |
未フォロー | 「フォローする」が表示される |
発生している問題・エラーメッセージ
発生している事象は以下です。
フォロー状態 | フォローボタン押下前 |
---|---|
フォロー済み | 1ユーザフォローしていると、すべてのユーザで「フォロー中」が表示される |
未フォロー | 誰もフォローしていない場合のみ「フォローする」が表示される |
該当のソースコード
以下はmodelの設定です。
model
1from django.db import models 2from django.contrib.auth.models import AbstractUser 3 4class CustomUser(AbstractUser): 5 avatar = models.ImageField(upload_to='images', verbose_name='プロフィール画像', blank=True, null=True) 6 profile = models.TextField(verbose_name='自己紹介', max_length=420, blank=True, null=True) 7 8 class Meta: 9 verbose_name_plural = 'CustomUser' 10 11 12class Relationship(models.Model): 13 14 # 自分をフォローしてくれている人 15 follower = models.ForeignKey(CustomUser, related_name='follower', on_delete=models.CASCADE) 16 # 自分がフォローしている人 17 following = models.ForeignKey(CustomUser, related_name='following', on_delete=models.CASCADE) 18 19 # 重複してフォロー関係を作成しないように制約を設定する 20 class Meta: 21 constraints = [ 22 models.UniqueConstraint(fields=['follower', 'following'], 23 name='user-relationship') 24 ] 25 26 def __str__(self): 27 return "{} : {}".format(self.follower.username, self.following.username)
以下はviewの設定です。
view
1class UserListView(LoginRequiredMixin, ListView): 2 template_name = 'account/userlist.html' 3 model = Relationship 4 5 def get_context_data(self, **kwargs): # 追加 6 context = super().get_context_data(**kwargs) 7 8 # ログインユーザ以外のユーザのオブジェクトを取得 9 alluser_list = CustomUser.objects.all().exclude(id=self.request.user.id) 10 context['alluser_list'] = alluser_list 11 12 # ログインユーザがフォローしているユーザのオブジェクトを取得 13 followed_list = [] 14 for following in alluser_list: 15 followed = Relationship.objects.filter(follower_id=self.request.user.id) 16 if followed.exists(): 17 followed_list.append(following.id) 18 context['followed_list'] = followed_list 19 20 return context 21
以下はhtmlです。
if following.id in followed_listで「フォロー中」「フォロー済」の表示切替をしていますが、うまく動作しません。
{% for following in alluser_list %} <tr class="text"> <td class="text-center align-middle"> <div class="mx-auto" id="target"> {# プロフィール画像列 #} <div class="rounded-circle text-center square border"> <a href="{% url 'diary:diary_list' following.username %}" class="text-decoration-none"> {% if following.avatar %} <img class="fit-img" src="{{ following.avatar.url }}"> {% else %} <img class="fit-img" src="{% static 'assets/img/avatar_default.png' %}"> {% endif %} </a> </div> </div> </td> <td class="text-center align-middle">{{ following.username }}</td> <td class="text-center align-middle">{{ following.profile | truncatechars:20 }}</td> <td class="text-center align-middle"> <form action="{% url 'accounts:userlist_relation' %}" method="POST" > {% csrf_token %} {% if following.id in followed_list %} <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm"> フォロー中 </button> {% else %} <button id="follow" name="{{following.id}}" class="btn btn-outline-primary btn-sm"> フォローする </button> {% endif %} </form> </td> </tr> {% endfor %}
お力添えいただけますでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。