英文:
JQuery AJAX success event not firing
问题
我正在构建一个社交媒体Web应用，尝试通过Ajax动态添加帖子和评论。帖子成功添加，但评论没有添加，因为成功事件没有触发。甚至错误事件也没有触发。但是AJAX调用已经完成（我通过在调用之前、成功事件和错误事件之后添加console.log语句来检查）。
以下是我编写的代码：这是使用类来初始化AJAX调用的代码（问题出现在createComment方法中，其余的代码是用于参考createComment中使用的其他方法）：
class PostComments {
// 构造函数用于在创建新实例时初始化类的实例
constructor(postId) {
this.postId = postId;
this.postContainer = $(`#post-${postId}`);
this.newCommentForm = $(`#post-${postId}-comments-form`);
this.createComment(postId);
let self = this;
// 调用所有现有的评论
$('.delete-comment-button', this.postContainer).each(function () {
self.deleteComment($(this));
});
}
createComment(postId) {
let pSelf = this;
this.newCommentForm.submit(function (e) {
e.preventDefault();
let self = this;
$.ajax({
method: 'post',
url: '/comments/create',
data: $(self).serialize(),
success: function (data, textStatus, xhr) {
console.log(data);
let newComment = pSelf.newCommentDom(data.data.comment, data.data.comment_user);
$(`#post-comments-${postId}`).prepend(newComment);
pSelf.deleteComment($('.delete-comment-button', newComment));
new Noty({
theme: 'nest',
text: "Comment published!",
type: 'success',
layout: 'topRight',
timeout: 1500
}).show();
},
error: function (error) {
console.log(error.responseText);
}
});
});
}
newCommentDom(comment, comment_user) {
// 我已经为删除评论链接添加了一个类“delete-comment-button”，还为评论的li添加了id
return $(`<li id="comment-${comment._id}">
<p>
<small>
<a class="delete-comment-button" href="/comments/destroy/${comment._id}">X</a>
</small>
${comment.content}
<br>
<small>
${comment_user}
</small>
</p>
</li>`);
}
deleteComment(deleteLink) {
$(deleteLink).click(function (e) {
e.preventDefault();
$.ajax({
method: 'get',
url: $(deleteLink).prop('href'),
success: function (data) {
$(`#comment-${data.data.comment_id}`).remove();
new Noty({
theme: 'nest',
text: "Comment Deleted",
type: 'success',
layout: 'topRight',
timeout: 1500
}).show();
},
error: function (error) {
console.log(error.responseText);
}
});
});
}
}
这是我用于创建评论的控制器操作的代码：
module.exports.create = async function (req, res) {
try {
let post = await Post.findById(req.body.post);
if (post) {
let comment = await Comment.create({
content: req.body.content,
post: req.body.post,
user: req.user._id
});
post.comments.push(comment);
post.save();
let comment_user = await Comment.find(comment._id).populate('user');
if (req.xhr) {
return res.status(200).json({
data: {
comment: comment,
comment_user: comment_user.user.name
},
message: "Comment created!"
});
}
req.flash('success', 'Comment published!');
res.redirect('/');
}
} catch (err) {
req.flash('error', err);
return;
}
}
这是我的帖子和评论视图的部分：
posts.ejs
<li id="post-<%= post._id %>">
<p>
<% if (locals.user && locals.user.id == post.user.id){ %>
<small>
<a class="delete-post-button" href="/posts/destroy/<%= post.id %>">X</a>
</small>
<% } %>
<%= post.content %>
<br>
<small>
-<%= post.user.name %>
</small>
</p>
<div class="post-comments">
<% if (locals.user){ %>
<!-- 给新评论表单一个id，我们还需要在home_posts.js中做相同的更改，因为我们在页面上添加了一个帖子 -->
<form id="post-<%= post._id %>-comments-form" action="/comments/create" method="POST">
<input type="text" name="content" placeholder="Add Comment..." required>
<input type="hidden" name="post" value="<%= post._id %>" >
<button type="submit">Add</button>
</form>
<% } %>
<div class="post-comments-list">
<ul id="post-comments-<%= post._id %>">
<% for (comment of post.comments){%>
<%= include('_comment') %>
<%} %>
</ul>
</div>
</div>
</li>
comments.ejs
<li id="comment-<%= comment._id %>">
<p>
<% if(locals.user && (locals.user.id == comment.user.id || locals.user.id == post.user.id)){ %>
<small>
<a class="delete-comment-button" href="/comments/destroy/<%= comment.id %>">X</a>
</small>
<% } %>
<%= comment.content %>
<br>
<small>
<%= comment.user.name %>
</small>
</p>
</li>
编辑：我在开发工具中检查了请求，发现它一直保持挂起状态。
英文:
I am building a social media web app and trying to add posts and comments dynamically via ajax. The posts are being added successfully but comments are not being added because the success event isn't firing. Even error event is not being fired. But the AJAX call is being completed (I checked it by adding console.log statements before call, in the success event and error event and after the call).
Here is the code that I wrote:-
This is the code for initiating AJAX call using classes (The problem is in createComment method, rest of the code is for reference to other methods used in createComment):-
class PostComments{
// constructor is used to initialize the instance of the class whenever a new instance is created
constructor(postId){
this.postId = postId;
this.postContainer = $(`#post-${postId}`);
this.newCommentForm = $(`#post-${postId}-comments-form`);
this.createComment(postId);
let self = this;
// call for all the existing comments
$(' .delete-comment-button', this.postContainer).each(function(){
self.deleteComment($(this));
});
}
createComment(postId){
let pSelf = this;
this.newCommentForm.submit(function(e){
e.preventDefault();
let self = this;
$.ajax({
method: 'post',
url: '/comments/create',
data: $(self).serialize(),
success: function(data, textStatus, xhr){
console.log(data);
let newComment = pSelf.newCommentDom(data.data.comment, data.data.comment_user);
$(`#post-comments-${postId}`).prepend(newComment);
pSelf.deleteComment($(' .delete-comment-button', newComment));
new Noty({
theme: 'nest',
text: "Comment published!",
type: 'success',
layout: 'topRight',
timeout: 1500
}).show();
},
error: function(error){
console.log(error.responseText);
}
});
});
}
newCommentDom(comment, comment_user){
// I've added a class 'delete-comment-button' to the delete comment link and also id to the comment's li
return $(`<li id="comment-${ comment._id }">
<p>
<small>
<a class="delete-comment-button" href="/comments/destroy/${comment._id}">X</a>
</small>
${comment.content}
<br>
<small>
${comment_user}
</small>
</p>
</li>`);
}
deleteComment(deleteLink){
$(deleteLink).click(function(e){
e.preventDefault();
$.ajax({
method: 'get',
url: $(deleteLink).prop('href'),
success: function(data){
$(`#comment-${data.data.comment_id}`).remove();
new Noty({
theme: 'nest',
text: "Comment Deleted",
type: 'success',
layout: 'topRight',
timeout: 1500
}).show();
},
error: function(error){
console.log(error.responseText);
}
});
});
}
}
This is the code of my controller action for creating comments:-
module.exports.create = async function(req, res){
try{
let post = await Post.findById(req.body.post);
if (post){
let comment = await Comment.create({
content: req.body.content,
post: req.body.post,
user: req.user._id
});
post.comments.push(comment);
post.save();
let comment_user = await Comment.find(comment._id).populate('user');
if (req.xhr){
return res.status(200).json({
data: {
comment: comment,
comment_user: comment_user.user.name
},
message: "Comment created!"
});
}
req.flash('success', 'Comment published!');
res.redirect('/');
}
}catch(err){
req.flash('error', err);
return;
}
}
This is my posts and comments view partials:-
posts.ejs
<li id="post-<%= post._id %>">
<p>
<% if (locals.user && locals.user.id == post.user.id){ %>
<small>
<a class="delete-post-button" href="/posts/destroy/<%= post.id %>">X</a>
</small>
<% } %>
<%= post.content %>
<br>
<small>
-<%= post.user.name %>
</small>
</p>
<div class="post-comments">
<% if (locals.user){ %>
<!-- let's give an id to the new comment form, we'll also need to make the same changes in home_posts.js where we're adding a post to the page -->
<form id="post-<%= post._id %>-comments-form" action="/comments/create" method="POST">
<input type="text" name="content" placeholder="Add Comment..." required>
<input type="hidden" name="post" value="<%= post._id %>" >
<button type="submit">Add</button>
</form>
<% } %>
<div class="post-comments-list">
<ul id="post-comments-<%= post._id %>">
<% for (comment of post.comments){%>
<%- include('_comment') -%>
<%} %>
</ul>
</div>
</div>
</li>
comments.ejs
<li id="comment-<%= comment._id %>">
<p>
<% if(locals.user && (locals.user.id == comment.user.id || locals.user.id == post.user.id)){ %>
<small>
<a class="delete-comment-button" href="/comments/destroy/<%= comment.id %>">X</a>
</small>
<% } %>
<%= comment.content %>
<br>
<small>
<%= comment.user.name %>
</small>
</p>
</li>
Edit:- I inspected the request in developer tools and found out that it remains pending forever
答案1
得分: 0
问题已解决。在控制器操作中，我写成了Comment.find(comment._id)，而不是Comment.findById(comment._id)，这就是为什么由于await关键字它一直挂起，成功回调没有触发。
英文:
The problem has been solved. In controller action, I had written Comment.find(comment._id) instead of Comment.findById(comment._id) which is why due to await keyword it was pending forever and the success callback wasn't firing.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论