ListViewでのいいね機能の実装
Q&AClosed
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