我在我的网络应用程序上实现了一个评论系统,如果记录正确保存到数据库中,评论将以JSON格式从服务器返回。
其他所有内容似乎都正常呈现,除了工具提示,其中包含用于编辑和删除注释的链接。注释被附加到div后,工具提示不会隐藏这些链接。
我正在使用CodeIgniter作为PHP框架,尽管这些信息可能没用,因为它是一个UI问题。
这是我插入评论的PHP代码(../ application / controllers / comments):
public function add() {
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$event_id = $this->input->post('event_id');
$user_id = $this->session->userdata('user_id');
$this->form_validation->set_rules('event_comment', 'Kommentti', 'trim|xss_clean|required|htmlspecialchars');
if ($this->form_validation->run() === false) {
$this->output->set_content_type('application_json');
$this->output->set_output(json_encode(array('st' => 0)));
return false;
} else {
$data = array('event_id' => $event_id, 'user_id' => $user_id, 'comment' => $this->input->post('event_comment'));
$comment = $this->comment_model->addComment($data);
}
if ($comment === true) {
$this->load->model('comment_model');
$new_comment = $this->comment_model->getNewestComment($event_id, $user_id);
$this->output->set_content_type('application_json');
$this->output->set_output(json_encode($new_comment));
return true;
} else {
$this->output->set_content_type('application_json');
$this->output->set_output(json_encode(array('st' => 0)));
return false;
}
}
}
这是我的AJAX(../ public / js / ajax.js):
$("#event_comment").keypress(function(e) {
if(e.which == 13) {
var from = $('.form-comments');
$.ajax({
url: from.attr('action'),
type: from.attr('method'),
data: $(from).serialize(),
dataType: 'json',
beforeSend: function() {
// Piilotetaan "Luo tapahtuma" - painike ja korvataan se
// "spinner" - ikonilla
from.find(".form-comment-send").hide();
from.find("#spinner_comment").show();
},
success: function(data) {
if(data) {
// RENDER MESSAGE HERE AND APPEND IT TO COMMENT BODY
renderCommentHTML( data[0] );
}
}, complete: function() {
from.find("#spinner_comment").hide();
from.find(".form-comment-send").show();
}
});
return false;
}
});
最后是渲染HTML的函数(../ public / js / functions.js)
function renderCommentHTML(data) {
var comment = '';
comment += '<div class="event-comments-comment post-comments-comment media" id="'+ data.id +'">';
// tooltip starts here
comment += '<div href="#" data-toggle="tooltip" title="" class="pull-right">';
comment += '<i class="fa fa-chevron-down grey fa-1x no-pad"></i>';
comment += '<div class="tooltip-content">';
comment += '<a role="button" class="btn-edit">Muokkaa</a>';
comment += '<form action="comments/delete" method="post">';
comment += '<input type="hidden" name="event_id" value="'+ data.event_id +'">';
comment += '<input type="hidden" name="comment_id" value="' + data.id +'">';
comment += '<button type="submit" name="delete_comment">Poista</button>';
comment += '</form>';
comment += '</div>';
comment += '</div>'
// Tooltip ends here
comment += '<a class="media-left" href="#">';
if(data.is_fb_img == 0) {
comment += '<img class="comment-pic semi-round" src="'+url+'public/images/uploads/profiles/'+ data.profilepic +'">';
} else {
comment += '<img class="comment-pic semi-round" src="'+ url + data.profilepic +'">';
}
comment += '</a>';
comment += '<div class="media-body wide">';
comment += '<h5 class="media-heading">'+ data.name +'</h5>';
comment += '<div class="edit_comment_area">';
comment += '<div class="comment-container">';
comment += '<form action="events/edit" method="post" class="edit-comment">';
comment += '<input type="hidden" name="c_id" value="'+ data.id +'">';
comment += '<div class="comment-text">'+data.comment+'</div>';
comment += '</form>';
comment += '</div>';
comment += '</div>';
comment += '<div class="comment-date">';
comment += '<span data-livestamp="'+ new Date().toISOString() +'"></span>';
comment += '</div>';
comment += '</div>';
comment += '</div>';
$('.comment-holder').append(comment);
}