概括
我有一个页面,其结构与您在 twitter 中发现的结构不同:一个帖子(“tweet”)提要,每个帖子都有一个内部有序列表(ol),该帖子的评论(tweet)所在的位置。我正在使用 AJAX 提交帖子(来自同一页面上的表单),还使用 AJAX 提交对该特定(或任何其他)帖子的评论。
问题
当我向帖子提交第一条评论时,页面会重新加载(在这种情况下会转到 post_comment.php 并显示其结果)。在获得第一条评论并提交第二条评论后,一切顺利。
我将在下面展示代码。你能帮帮我吗?这很可能是一件非常简单的事情。
流动
- Main_page.php - jquery、jquery 表单插件和 post_comment 的脚本声明在哪里,主要结构在哪里。
- Main_page Post - 通过 ajax(ajaxForm - 来自 jquery 表单插件)发布到 main_page.php。这篇文章还有一个表单,其中包含要发送以提交评论的 2/3 元素。
- 发表评论 - 通过之前提交的帖子提交。通过 ajaxForm 调用 post_comment.php。如上所述,第一次(当评论 ol 为空时)失败。在获得第一条评论后,无需重新加载页面即可添加新评论。
JS:
$(function() {
//var this = $(this).closest('.form_wrapper-feed').next().find('.comments-feed').child("ol.post_comment_list");
var options = {
//clearForm: true,
//resetForm: true,
//beforeSubmit: ShowRequest,
url: 'post_comment.php',
success: function(html)
{
var arrHTML = html.split('|');
var postId = $.trim(arrHTML[0]);
var html_code = arrHTML[1];
var target = 'ol#post_comment_list'+postId;
console.log('codigo html'+html_code);
console.log('aqui vai o post id'+postId);
console.log('aqui vai o target'+target);
$('ol#post_comment_list'+postId).append(html_code);
//$('ol#post_comment_list'+postId 'li:first').slideDown('slow');
$('.footer-post').hide();
$('.comments-feed').delay(2000).slideUp({duration: 1000, queue: true});
$('.small-textarea-main-feed').removeClass('set-large');
resetForm($('.footer-comment'));
},
error: function()
{
alert('ERROR: unable to upload files');
},
complete: function()
{
//$('form#post-question-form')[0].reset();
//resetForm($('#post-question-form'));
},
};
$(".footer-comment").ajaxForm(options);
function ShowRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
return true;
}
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
});
PHP(发表评论)
<?php
include 'C:/xampp/htdocs/dh/core/init.php';
// form registration validation
if (empty($_POST) === false) {
$required_fields = array('comment');
foreach($_POST as $key => $value) {
if (empty($value) && in_array($key, $required_fields) === true) {
$errors[] = 'All fields are required';
break 1;
}
}
if (empty($errors) === true) {
// preg_match retunns an int, so it has only 2 == as oppposed to ===
if (strlen($_POST['comment']) > 300) {
$errors[] = 'Your answer must be less than 300 characters';
}
}
}
//print_r($errors);
?>
<?php
if (empty($_POST) === false && empty($errors) === true) {
//register user
$post_comment = array(
'comment' => $_POST['comment'],
'id' => $_POST['id'],
);
//echo $post_comment['id'];
$user_id = $_SESSION['user_id'];
post_comment_db($user_id, $post_comment);
//print_r($post_question['tags']);
echo load_comment($user_id,$post_comment);
//add_new_comment();
//load_top_questions();
} else{
echo output_errors($errors);
}
?>
PHP/HTML(...使用以下代码添加新评论 - post_comment.php 的输出 - 这部分在单独的 users.php 文件中计算)
function load_comment($user_id,$post_comment){
$comment = $post_comment['comment'];
$username = mysql_result(mysql_query("SELECT `username` FROM `users` WHERE `user_id` = $user_id"), 0, 'username');
$comment_id = mysql_result(mysql_query("SELECT `comment_id` FROM `comments` WHERE `message` = '$comment'"), 0, 'comment_id');
$timestamp = mysql_result(mysql_query("SELECT `timestamp` FROM `comments` WHERE `comment_id` = $comment_id"), 0, 'timestamp');
//$timestamp = mysql_result(mysql_query("SELECT `timestamp` FROM `comments` WHERE `user_id` = $user_id"), 0, 'timestamp');
$r = format_time($timestamp);
$question_id = $post_comment['id'];
$q = "SELECT `comment_id` FROM `question_has_comments` WHERE `question_id` = $question_id ORDER BY `timestamp` DESC LIMIT 1" ;
$q = "SELECT `comment_id` FROM `comments` WHERE `question_id` = $question_id ORDER BY `timestamp` DESC LIMIT 1" ;
$post_id = $post_comment['id'];
$send_back = $post_id . '|' . '<li id="' .$post_comment['id']. '" class="post_comment">
<div id="" class="give-margin">
<div id="" class="profile-page-avatar-wrapper">
<a href="#"><img id="" class="profile-page-avatar-image" src="./images/test/chemistry.jpg" alt=""></a><!-- A imagem -->
</div>
<div id="" class="profile-page-uploader-tools">
<div id="" class="profile-image-btn">
<div id="" class="profile-page-btn-wrapper">
<div id="" class="header-id">
<a href="#"><span id="user-name">' . $username . '</span></a>
</div>
<div id="" class="question-page-feed-answer-header-timer">
<a id="feed-answer-header-timer" href="#"><span class="timer" data-time="">' . $r . '</span></a>
</div>
</div> <!-- fecha Div wrapper do botao-->
</div>
<p>' . $post_comment['comment'] . '</p>
</div>
</div>
</li>
';
echo $send_back;
}