Issue:
After submitting a comment on a webpage, the comments are not displaying correctly. I want them to slide down below the last added comment. It seems to be related to CSS selectors. Can someone help me figure out which selector I need to use?
Any assistance would be greatly appreciated. Thank you!
$(function() {
"use strict";
var commentsform = $('#commentsForm');
var errorTemplate = '<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> {error}</div>';
var successTemplate = '<div class="alert alert-success"><span class="glyphicon glyphicon-warning-sign"></span> {error}</div>';
var commentsTemplate = '<div class="row" id="comments"><div class="col-md-2 col-sm-2 hidden-xs"><figure class="thumbnail">{photo}<figcaption class="text-center">{username}</figcaption></figure></div><div class="col-md-10 col-sm-10"><div class="panel panel-default arrow left"><div class="panel-body"><header class="text-left"><div class="comment-user"><i class="fa fa-user"></i> {username}</div><time class="comment-date"datetime="{date}"><i class="fa fa-clock-o"></i> {date}</time></header><div class="comment-post">{comment}</div></div></div></div></div>';
var messages = $('#messages');
var comments = $(''); //which one selector do I have to type for it?
commentsform.submit(function() {
$.ajax({
dataType: "json",
url: '/users/ajax/add-comments/',
type: 'POST',
data: commentsform.serialize(),
success: function(response) {
if (response) {
if (response.errors) {
errorTemplate = errorTemplate.replace(/\{error\}/, response.msg);
messages.show();
messages.html(errorTemplate);
setTimeout(function() {
messages.slideUp(1500);
}, 1000);
return false;
} else {
$('#commentsForm')[0].reset();
var comment = commentsTemplate;
successTemplate = successTemplate.replace(/\{error\}/, response.msg);
messages.show();
messages.html(successTemplate);
setTimeout(function() {
messages.slideUp(1500);
}, 1000);
comment = comment.replace(/\{photo\}/, response.avatar);
comment = comment.replace(/\{username\}/, response.username);
comment = comment.replace(/\{comment\}/, response.comment);
comment = comment.replace(/\{date\}/, response.date);
comments.append(comment);
comments.find('#comments ::after').slideDown();
}
}
}
});
return false;
});
});<section class="comment-list">
<div class="row comments">
<div class="col-md-10 col-sm-10">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left">
<div class="comment-user">
<i class="fa fa-user"></i>
</div>
<time class="comment-date" datetime="">
<i class="fa fa-clock-o"></i>
</time>
</header>
<div class="comment-post"></div>
</div>
</div>
</div>
</div>
</section>I'm struggling with this issue and don't know how to fix it!