twitterのような、いいね機能を実装する際に非同期処理でデータのやり取りを行いたいのですが、うまくいきません.ajax処理の部分にfailを追加してエラー処理を行ってみた結果、コンソールには下記のように表示されました。
ajax通信に失敗しました
home.js:39 jqXHR : 404
home.js:40 textStatus : error
home.js:41 errorThrown : undefined
Uncaught ReferenceError: url is not defined
これをみるとurlを定義する部分でエラーが起こっているようなのですが、この部分は参考にしているwebサイトと全く同じで、どこが間違っているかわかりません。
コードを載せますので原因がわかる方がいたらお願いします。
home.html(コードの一部)
1{% for tweet in tweetmodel_list reversed %} 2 <div class="tweet-container container border border-secondary"> 3 <p class="font-bold d-flex"><img src="{{ tweet.user.ProfileImage.url }}" width="50px" height="50px" style="border-radius: 100%;" class="me-3">{{ tweet.user.username }} 4 {% if user == tweet.user %} 5 <button type="button" class="btn btn-danger del_confirm" data-bs-toggle="modal" data-bs-target="#DeleteModal" data-deleteurl="{% url 'TweetDelete' tweet.id %}">削除</button> 6 {% endif %} 7 </p> 8 <p class="tweet-text">{{ tweet.content | linebreaksbr }}</p> 9 {% if tweet.snsImage %} 10 <p><img src="{{ tweet.snsImage.url }}" width="70%" style="border-radius: 5%;" class="bg-light"></p> 11 {% endif %} 12 13 14 <form action="{% url 'like' %}" method="POST">{% csrf_token %} 15 {% if tweet.id in liked_list %} 16 <button id="like" name="{{tweet.id}}"><i class="fas fa-lg fa-heart like-red"></i></button> 17 {% else %} 18 <button id="like" name="{{tweet.id}}"><i class="far fa-lg fa-heart"></i></button> 19 {% endif %} 20 </form> 21 <p name="{{tweet.id}}-count" class="count"> {{ tweet.like_set.count }} </p> 22 </div> 23 {% endfor %}
views.py
1class HomeView(LoginRequiredMixin,generic.ListView): 2 //省略 3 4 def get_context_data(self): 5 context = super().get_context_data() 6 liked_list = [] 7 8 for tweet in context['tweetmodel_list']: 9 liked = tweet.like_set.filter(user=self.request.user) 10 if liked.exists(): 11 liked_list.append(tweet.id) 12 13 context['liked_list']=liked_list 14 return context 15 16 17def LikeFunc(request): 18 if request.method =="POST": 19 tweet = get_object_or_404(TweetModel, pk=request.POST.get('tweet_id')) 20 user=request.user 21 liked = False 22 like = Like.objects.filter(tweet=tweet, user=user) 23 if like.exists(): 24 like.delete() 25 else: 26 like.create(tweet=tweet, user=user) 27 liked = True 28 29 context={ 30 'tweet_id': tweet.id, 31 'liked': liked, 32 'count': tweet.like_set.count(), 33 } 34 35 if request.is_ajax(): 36 return JsonResponse(context) 37
urls.py
1urlpatterns = [ 2 path('signup/',signupView.as_view(),name='signup'), 3 path('login/',loginFunc,name='login'), 4 path('logout/',logoutFunc,name='logout'), 5 path('home/',HomeView.as_view(),name='home'), 6 path('tweet/',TweetView.as_view(),name='tweet'), 7 path('TweetDelete/<int:tweet_pk>',tweet_del,name='TweetDelete'), 8 path('profile_edit/<int:pk>',profile_editView.as_view(),name='profile_edit'), 9 path('like/',LikeFunc, name='like'), 10] 11
models.py
1class TweetModel(models.Model): 2 content=models.TextField() 3 user=models.ForeignKey(CustomUser,verbose_name='紐づくユーザー',on_delete=models.PROTECT,blank=True) 4 snsImage=models.ImageField(null=True,blank=True,upload_to='') 5 6 7 def __str__(self): 8 return self.content[:10] 9 10class Like(models.Model): 11 tweet=models.ForeignKey(TweetModel,on_delete=models.CASCADE) 12 user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
home.js
1$(document).ready(function(event){ 2 $(document).on('click', '#like', function(event){ 3 event.preventDefault(); 4 $.ajax({ 5 type: 'POST', 6 url: "{% url 'like' %}", 7 data: { 8 'tweet_id': $(this).attr('name'), 9 'csrfmiddlewaretoken': '{{ csrf_token }}'}, 10 dataType: 'json' 11 }) 12 .done(function(response){ 13 selector = document.getElementsByName(response.tweet_id); 14 if(response.liked){ 15 $(selector).html("<i class='fas fa-lg fa-heart'></i>"); 16 } 17 else { 18 $(selector).html("<i class='far fa-lg fa-heart'></i>"); 19 } 20 selector2 = document.getElementsByName(response.tweet_id + "-count"); 21 $(selector2).text(response.count); 22 }) 23 .fail(function (jqXHR, textStatus, errorThrown) { 24 // 通信失敗時の処理 25 alert('ファイルの取得に失敗しました。'); 26 console.log("ajax通信に失敗しました"); 27 console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得 28 console.log("textStatus : " + textStatus); // タイムアウト、パースエラー 29 console.log("errorThrown : " + errorThrown.message); // 例外情報 30 console.log("URL : " + url); 31 }); 32 }); 33}); 34
コードは、関係していると思われる部分を抜粋していますので、足りないところがあれば、教えてください。
参考にしたサイトです↓
https://h-memo.com/how-to-make-a-like-button-using-django/
※追記
urlが読み込まれないのはjavascriptを外部スクリプトとしてhtmlに読み込んでいたため、{% url 'like'%}が認識されていなかったからでした。
ですが、今度は
Page not found (404) No TweetModel matches the given query.
というエラーが出ていて、どうやらviews.py のLikeFunc関数の中にあるget_object_or_404でエラーがでているようです。
ここも参考サイトと同じ記述をしており原因がわかりません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。