質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

djangoのview設定について

deango
deango

総合スコア152

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0リアクション

0クリップ

209閲覧

投稿2022/07/12 16:32

編集2022/07/27 11:02

前提

DJANGOでSNSアプリを作成しています。
フォローボタンをajaxの非同期通信を利用して実装中なのですが、
ボタンを押す前の状態が意図した動きにならず、困っています。
※ajaxの設定については正常に動作しているため、コード記載しておりません。

期待する動作

フォロー状態フォローボタン押下前
フォロー済み「フォロー中」が表示される
未フォロー「フォローする」が表示される

発生している問題・エラーメッセージ

発生している事象は以下です。

フォロー状態フォローボタン押下前
フォロー済み1ユーザフォローしていると、すべてのユーザで「フォロー中」が表示される
未フォロー誰もフォローしていない場合のみ「フォローする」が表示される

該当のソースコード

以下はmodelの設定です。

model

from django.db import models from django.contrib.auth.models import AbstractUser class CustomUser(AbstractUser): avatar = models.ImageField(upload_to='images', verbose_name='プロフィール画像', blank=True, null=True) profile = models.TextField(verbose_name='自己紹介', max_length=420, blank=True, null=True) class Meta: verbose_name_plural = 'CustomUser' class Relationship(models.Model): # 自分をフォローしてくれている人 follower = models.ForeignKey(CustomUser, related_name='follower', on_delete=models.CASCADE) # 自分がフォローしている人 following = models.ForeignKey(CustomUser, related_name='following', on_delete=models.CASCADE) # 重複してフォロー関係を作成しないように制約を設定する class Meta: constraints = [ models.UniqueConstraint(fields=['follower', 'following'], name='user-relationship') ] def __str__(self): return "{} : {}".format(self.follower.username, self.following.username)

以下はviewの設定です。

view

class UserListView(LoginRequiredMixin, ListView): template_name = 'account/userlist.html' model = Relationship def get_context_data(self, **kwargs): # 追加 context = super().get_context_data(**kwargs) # ログインユーザ以外のユーザのオブジェクトを取得 alluser_list = CustomUser.objects.all().exclude(id=self.request.user.id) context['alluser_list'] = alluser_list # ログインユーザがフォローしているユーザのオブジェクトを取得 followed_list = [] for following in alluser_list: followed = Relationship.objects.filter(follower_id=self.request.user.id) if followed.exists(): followed_list.append(following.id) context['followed_list'] = followed_list return context

以下は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 %}

お力添えいただけますでしょうか。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。