javascript - 为什么 JQuery 不从替换 div 传递 post_id 和 post_type
问题描述
我修复了 like/unlike 函数,现在它们可以工作了,但是如果您在单击“Like”(反之亦然)后单击“Unlike”而不重新加载页面,则 post_id 和 post_type 不会传递到视图。我试图将它们传递给替换按钮的 html,我可以在新的 div 上看到它们,但也没有从那里传递给视图。我不知道该怎么做,因为我不明白数据是如何丢失的。我还在替换 html 中放置了两个 div 标记,它们将 id 和 type 作为值保存,因为我需要在替换 html 中的脚本(不知道)才能使按钮工作。为什么 JS 无法从替换 html 中获取数据?
代码相当长,所以我提前道歉
feed.html(主 html 的片段)
<div class="like-stuff">
{% if not request.user|user_liked_post:post %}
<button class='like-post-btn' value="{{like_btn_val}}">
<span class="glyphicon glyphicon-thumbs-up"></span>
Like
</button>
{% else %}
<button class='like-post-btn' value="{{like_btn_val}}">
<span class="glyphicon glyphicon-thumbs-up"></span>
Unlike
</button>
{% endif %}
<div class="like-count">{{post.like_count}}<div>
{% if not request.user|user_disliked_post:post %}
<button class='dislike-post-btn' value="{{dislike_btn_val}}">
<span class="glyphicon glyphicon-thumbs-down"></span>
Dislike
</button>
{% else %}
<button class='dislike-post-btn' value="{{dislike_btn_val}}">
<span class="glyphicon glyphicon-thumbs-down"></span>
Undislike
</button>
{% endif %}
<div class="dislike-count">{{post.dislike_count}}</div>
</div>
<script src="static/js/handle_likes.js"></script>
likes.html(替换 html)
<div id="post_id" value="{{post_id}}">id: {{post_id}}</div>
<div id="post_type" value="{{post_type}}">type: {{post_type}}</div>
<div class="like-stuff">
<button class='like-post-btn' value="{{like_btn_val}}">
<span class="glyphicon glyphicon-thumbs-up"></span>
{{like_btn}}
</button>
<h1>{{like_count}}</h1>
<button class='dislike-post-btn' value="{{dislike_btn_val}}">
<span class="glyphicon glyphicon-thumbs-down"></span>
{{dislike_btn}}
</button>
<h1>{{dislike_count}}</h1>
</div>
<script src="static/js/handle_likes.js"></script>
handle_likes.js(喜欢和不喜欢的功能
$(".like-post-btn").on('click', function(){
console.log("Thing was clicked!"); // sanity check
if ($(".like-post-btn").val() == "not-liked") {
console.log($('.like-post-btn').val());
like_post();
}
if ($(".like-post-btn").val() == "is-liked") {
unlike_post();
}
});
// Start functions to handle likes/dislikes
function like_post(){
console.log("Like post called...") // sanity check
console.log("Test JQuery like post..");
console.log($("#post_id"));
console.log($("#post_type"));
$.ajax({
url: "posting/liking_post/",
data: {
post_id : $("#post_id").val(),
post_type : $("#post_type").val()
},
success: function(data) {
console.log(data);
$('.like-stuff').html(data);
},
error : function(xhr,errmsg,err) {
$('#results').html("<div class='alert-box alert radius' data-alert>Please contact an admin; We have encountered an error: "+errmsg+
" <a href='#' class='close'>×</a></div>"); // add the error to the dom
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
};
function unlike_post(){
console.log("Unlike post called...") // sanity check
console.log("Test JQuery unlike post..");
console.log($("#post_id"));
console.log($("#post_type"));
$.ajax({
url: "posting/unlike_post/",
data: {
post_id : $("#post_id").val(),
post_type : $("#post_type").val()
},
success: function(data) {
$('.like-stuff').html(data);
},
error : function(xhr,errmsg,err) {
$('#results').html("<div class='alert-box alert radius' data-alert>Oops! Please contact an admin for we have encountered an error: "+errmsg+
" <a href='#' class='close'>×</a></div>"); // add the error to the dom
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
};
视图.py
@login_required
def like_post(request):
if request.is_ajax():
post_id = request.GET.get('post_id')
post_type = request.GET.get('post_type')
print("Debug in like_post line 452:",post_id, post_type)
if not post_id or not post_type:
raise Exception("Post id or Post type not passed to 'like post' please fix it")
post = toolz.get_post(post_id, post_type)
if not user_liked(request.user, post):
like = Like(
user=request.user,
content_object=post
)
like.save()
like_count = post.like_count + 1
post.like_count = like_count
print("Like count:", post.like_count)
post.save()
# Start data declarations
like_count = post.like_count
print(like_count)
dislike_btn = "Dislike"
dislike_btn_val = "not-disliked"
dislike_count = post.dislike_count
data = {
'post_id': post_id,
'post_type': post_type,
'like_count': like_count,
'like_btn': 'Unlike',
'like_btn_val': 'is-liked',
'dislike_btn':dislike_btn,
'dislike_btn_val': dislike_btn_val,
'dislike_count': dislike_count
}
return render(None, 'likes.html', data)
else:
return HttpResponse("You're trying to like the post twice...stop it")
else:
raise Exception("Not ajax")
解决方案
div 没有 value 属性(作为valid),但如果你必须在 div 中使用 value,你可以使用 .attr('value')。
$('#post_id').attr('value')
$('#post_type').attr('value')
推荐阅读
- mysql - MySQL 如果在另一个表中找不到匹配的 id
- swift - swift4中的核心数据谓词格式
- php - 无法将文件从 PHP 上传到 Centos 服务器?
- c++ - 使用 std::call_once 创建 singleTon 类
- c# - 在 DirectX11 中更改渲染大小
- bootstrap-4 - Boostrap如何对齐垂直药丸
- javascript - Javascript - 如何使用嵌套的 for 循环创建表?
- javascript - 如何在 Amcharts 中迭代 json 对象
- git - git tag -v 错误:无法创建临时文件:不允许操作
- java - 无法通过 SMTP、Java 向海外发送电子邮件