概要
私は、Twitter で見られるのと同じ構造よりも少ないページを持っています: 投稿 ("つぶやき") フィードと、その投稿 (ツイート) へのコメントが存在する内部順序付きリスト (ol) を持つ各投稿。私はAJAXを使用して（同じページのフォームから）投稿を送信し、AJAXを使用してその特定の（または他の）投稿にコメントを送信しています。
問題
投稿に最初のコメントを送信すると、ページがリロードされます (この場合、post_comment.php に移動し、その結果が表示されます)。最初のコメントがあり、2 番目のコメントを送信すると、すべてがうまくいきます。
以下にコードを提示します。助けていただけませんか？それは非常に単純なことかもしれません。
フロー
- 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;
}