LoginSignup
shimauma11
@shimauma11

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ListViewでのいいね機能の実装

ListViewでのいいね機能の実装

現在、練習でTwitterのようなアプリの開発を行なっています。

detailviewでのいいね機能の実装はできたのですが、listviewでのいいね機能の実装がうまくできません。

<!-- テンプレート -->
{% for tweet in tweets%}
    <div class="tweet-container">
        <div class="tweet-1 tweet-box">
            <p>
                <a href="{% url 'accounts:profile' tweet.user %}">
                    <button type="button" class="btn btn-light">{{ tweet.user }}</button>
                </a> {{ tweet.created_at }}
            </p>
        </div>
        <div class="tweet-2 tweet-box">
            <p>{{ tweet.content }}</p>
        </div>
        <div class="tweet-3 tweet-box">
            <a href="{% url 'tweets:detail' tweet.pk %}"><button type="button" class="btn btn-outline-dark">詳細</button></a>
        </div>
        {% if it_is_liked %}
        <a href="javascript:void(0)" id="tweet_{{ tweet.id }}" class="like" name="{{ tweet.id }}" type="button" data-is_liked="True" data-url="{% url 'tweets:unlike' tweet.pk %}">いいね ({{ like_count }})</a><br>
        {% else %}
        <a href="javascript:void(0)" id="tweet_{{ tweet.id }}" class="like" name="{{ tweet.id }}" type="button" data-is_liked="False" data-url="{% url 'tweets:like' tweet.pk %}">いいね ({{ like_count }})</a><br>
        {% endif %}
    </div>
    {% endfor %}
<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 el = $(this);
        var tweet_id = el.attr("name")
        $.ajax({
            type: "POST",
            method: "POST",
            url: el.data("url"),
            data: {
                "id": tweet_id
            },
            dataType: "json"
        }).done(function (data) {

            if (el.data("is_liked") == "False") {
                el.data("is_liked", "True");
                el.data("url", "{% url 'tweets:unlike' tweet.pk %}");
                $("#tweet_" + String(data["tweet_id"])).text("いいね (" + String(data["like_count"]) + ")");
            } else {
                el.data("is_liked", "False");
                el.data("url", "{% url 'tweets:like' tweet.pk %}");
                $("#tweet_" + String(data["tweet_id"])).text("いいね (" + String(data["like_count"]) + ")");
            }
        })
    });
</script>
#view.py
class HomeView(LoginRequiredMixin, ListView):
    model = Tweet
    template_name = "tweets/home.html"
    context_object_name = "tweets"
    queryset = model.objects.select_related("user").order_by("-created_at")
#urls.py
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"),
    path("<int:pk>/unlike/", views.UnlikeView, name="unlike"),
]

と言うのも、上のコードのように、テンプレートにはtweetのリストを送ってしまっているため、urls.pyにうまくpkを渡すことができません。

自分では全く解決策が思いつかないので、教えていただけると幸いです。

0

No Answers yet.

Your answer might help someone💌