LoginSignup
shimauma11
@shimauma11

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ajaxを用いたいいね機能の実装について

いいね機能の実装がうまくいかない

現在、djangoでTwitterのようなアプリを作成しています。Ajaxを利用した、いいね機能を実装したいのですが、いいねボタンを押しても全く反応がありません。

該当するソースコード

#いいねボタンを置きたいテンプレート
#post_datail.html
{% block main %}
<div class="container">
    <h1>詳細</h1>
    <div class="content_box">
        <p>{{ tweet.content }}</p>
    </div>
    <p>{{ tweet.user }} {{ tweet.created_at }}</p>
        
    <a href="javascript:void(0)" id="article_{{ tweet.id }}" class="like" name="{{ tweet.id }}" type="button">いいね ({{ tweet.like_count }})</a>

    <a href="{% url 'tweets:delete' tweet.pk %}">
        <button type="button" class="btn btn-outline-danger">削除</button>
    </a>
    <a class="reverse_button" href="{% url 'tweets:home' %}">
        <button type="button" class="btn btn-primary btn-back">戻る</button>
    </a>
</div>
{% endblock %}

{% block extrajs %}
<script type="text/javascript">

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        crossDomain: false, // obviates need for sameOrigin test
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    $(".like").on("click", function () {
        var tweet_id = $(this).attr("name")
        $.ajax({
            type: "POST",
            method: "POST",
            url: tweet_id + "/like/",
            data: {
                "id": tweet_id 
            },
            dataType: "json"
        }).done(function(data){
            $("#tweet_"+String(data["tweet_id"])).text("いいね " +"("+ String(data["tweet_like_count"]+")"));
        })
    });
</script>
{% endblock %}

#views.py
def LikeView(request, pk):

    tweet = Tweet.objects.get(pk=pk)

    tweet.like_count += 1
    tweet.save()

    tweet = get_object_or_404(Tweet, pk=pk)

    return JsonResponse({"tweet_like_count": tweet.like_count, "tweet_id": pk})

#models.py
from django.db import models
from django.contrib.auth import get_user_model

User = get_user_model()


class Tweet(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    content = models.TextField(max_length=150)
    created_at = models.DateTimeField(auto_now_add=True)
    like_count = models.IntegerField(default=0)

    def __str__(self):
        return str(self.content)

#urls.py
app_name = "tweets"
urlpatterns = [
    path("home/", views.HomeView.as_view(), name="home"),
    path("create/", views.TweetCreateView.as_view(), name="create"),
    path("<int:pk>/", views.TweetDetailView.as_view(), name="detail"),
    path("<int:pk>/delete/", views.TweetDeleteView.as_view(), name="delete"),
    path("<int:pk>/like/", views.LikeView, name="like"),
]

post_datail.htmlはbase.htmlを拡張しており、base.htmlの方でjQueryを読み込んでいます。

エラーのようなものはないのですが、いいねボタンを押しても何の反応もありません。

どこが間違えているのかわからないので、教えていただきたいです。

0

1Answer

This answer has been deleted for violation of our Terms of Service.

Your answer might help someone💌