$(function (){
//进入到blog页面就 局部刷新评论区 load没写data参数，所以是get请求
$("#comment-container").load("[[@{/comments/{id}(id=${blogDetails.id})}]]");
$('#payButton').popup({
popup: $('.payQR.popup'),
on: 'click',
position: 'bottom center'
});
tocbot.init({
tocSelector: '.js-toc',
contentSelector: '.js-toc-content',
headingSelector: 'h1.h2,h3',
});
$('.wechat').popup({
popup: $('.wechat-qr'),
on: 'click',
position: 'left center'
});
$('#toTop-button').click(function () {
$(window).scrollTo(0, 500);
});
//留言区的非空验证
function check() {
if ($('#leave-word').val().trim() == "") {
alert("留言区不能为空");
return 0;
}
if ($('#nickName').val() == "") {
alert("姓名不能为空");
return 0;
}
if ($('#email').val() == "") {
alert("邮箱不能为空");
return 0;
}
return 1;
}
//ajax请求成功后的一些动作
function loadSuccess() {
//清除评论内容
$("[name='content']").val("");
//点击回复时候 赋值 暂时赋值-1
$("[name='parentComment.id']").val(-1);
//初始化留言输出框
$("[name='content']").attr("placeholder", "请留言...");
//页面回滚到留言区首个评论部分
$(window).scrollTo($('#liuyanqu'), 500);
}
//点击留言按钮
$(document).delegate("button#commentpost-btn", "click", function () {
// $('#commentpost-btn').click(function (){
var checkResult = check();
//表单通过验证
if (checkResult == 1) {
//测试ajax 成功
// $('#comment-container').load("[[@{/test}]]",{
// "testName":$("[name='nickName']").val()
// });
//测试ajax 成功
// var url = "[[@{/commentsTest}]]"
// $('#comment-container').load(url,{
// "nickname":$("[name='nickName']").val(),
// });
//校验成功 发送ajax请求 /*[[@{/comments}]]*/""
$('#comment-container').load("[[@{/comments}]]", {
//要发送到服务器的数据
"parentComment.id": $("[name='parentComment.id']").val(),
"blog.id": $("[name='blog.id']").val(),
"nickname": $("[name='nickName']").val(),
"email": $("[name='email']").val(),
"content": $("[name='content']").val()
}, function (responseTxt, statusTxt, xhr) {
loadSuccess();
});
} else {
//alert("校验失败");
return 0;
}
});
//点击回复后的方法
function reply(obj) {
//回复的博客Id
var commentId = $(obj).data('id');
//回复的人的昵称
var commentNickName = $(obj).data('nickname');
//给留言区填上 @要回复的人的昵称,加 聚焦
$("[name='content']").attr("placeholder", "@" + commentNickName).focus();
$("[name='parentComment.id']").val(commentId);
//滚动到回复填写处
$(window).scrollTo($('#leave-word'), 500);
}
});
<div class="content">
<a class="author" id="replyComment" th:text="${comment.nickname}">Matt</a>
<div class="metadata">
<span class="date" th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd hh:mm')}">今天下午 5:42</span>
</div>
<div class="text" th:text="${comment.content}">太赞了！ </div>
<div class="actions">
<a class="reply" id="testReply" onclick="reply(this)" th:attr="data-nickname=${comment.nickname}" th:attrappend="data-id=${comment.id}">回复</a>
</div>
</div>
