私はフェイスブックのようなウェブサイトを持っています。10 秒ごとに投稿をチェックして、新しいコメントを読み込む必要があるかどうかを確認します。コードは次のようになります。
<div id="profile_entry_1">
<div id="posttext_id1">Woot woot!</div>
<div id="comment_id15" class="checkForNewComments">This is the 15th comment in the database</comment>
<div id="more_wall_comments_div_1"></div>
</div>
<div id="profile_entry_2">
<div id="posttext_id2">Woot woot!</div>
<div id="comment_id16">This is the 16th comment in the database</comment>
<div id="comment_id17">This is the 17th comment in the database</comment>
<div id="comment_id18" class="checkForNewComments">This is the 18th comment in the database</comment>
<div id="more_wall_comments_div_2"></div>
</div>
上には 2 つの投稿があり、最初の 2 つはデータベースにあり、それぞれにコメントが付いています。ページが最初にロードされると、PHP は最後のコメントを探し、特定のクラスを割り当てます。
「checkForNewComments」のクラスが割り当てられているため、JavaScript はその comment_id ID を取得できます。
その ID を新しいページに送信して、その投稿に関するより価値の高いコメントを探し、JSON 形式で Ajax 呼び出しを介してそれらを読み込みます。私はそれを解析し、「newComments」セクションに .append() します。
そのため、コードが新しいコメントを見つけた場合、投稿の「checkForNewComments」クラスを取り除きます。
<div id="profile_entry_2">
<div id="posttext_id2">Woot woot!</div>
<div id="comment_id16">This is the 16th comment in the database</comment>
<div id="comment_id17">This is the 17th comment in the database</comment>
<div id="comment_id18">This is the 18th comment in the database</comment>
<div id="more_wall_comments_div_2"></div>
</div>
読み込まれる投稿、たとえば、comment_id19 は「checkForNewComments」のクラスを持つようになるため、10 秒以内に新しいコメントを検索すると、19 より大きいコメントが検索されます。
問題は、JavaScript が新しくロードされた DIV および CLASS 情報にアクセスできないことです。
どうすればいいですか？
これが私のJavaScriptです
<script type="text/javascript">
var loadedComments = true;
function loadComRefresh(timeoutPeriod){ setTimeout("loadNewComs();",timeoutPeriod); }
function loadNewComs(){
if (loadedComments == true){
loadedComments = false;
var loadComString = "";
$('.loadNewComs').each(function() {
comLoad = this.id.substr(14);
testD = $("#more_wall_comments_div_" + comLoad).find(".commentDivID").attr("id");
if (testD != undefined){
addSub = ":"+ testD +"";
} else { addSub = ""; }
loadComString = loadComString + comLoad + addSub + ",";
});
$.ajax({
url: '../members/more_wall_comments_json.php',
data: "loadComString=" + loadComString,
dataType: "json",
cache: false,
success: function(data) {
loadedComments = true;
if (data != null){
for(var i=0; i<data.loadComs.length;i++) {
$("#postnewcomment" + data.loadComs[i].id).html(data.loadComs[i].script);
}
}
}
});
loadComRefresh(10000);
}
</script>
<body onLoad="loadComRefresh(10000);">
ドキュメントの PHP/HTML は次のとおりです。
<?php
echo '
<div id="profile_entry_'. $recent_id .'" class="loadNewComs" '. $delete_mouse_over .'>
<table style="width:'. $table_width .'">
<tr>
<td style="width:50px;height:50px;padding:5px;vertical-align:top;">
<a href="'. $extralink .'viewmember.php?id='. $to_id .'"><img src="'. getMemberThumbnail($to_id) .'" style="width:50px;height:50px;display:block;" alt="" /></a>
</td>
<td style="padding:5px 5px 5px 0;vertical-align:top;width:100%;">
<a href="'. $extralink .'viewmember.php?id='. $to_id .'">'. getName($to_id) .'</a>
<div style="margin:2px 0 0 0;">'. getEmoticon(tagUserLinks(breakUp($change))) .'</div>'
<div id="more_wall_comments_div_'. $recent_id .'">';
$array = array();
$q = mysql_query("SELECT t1.id_id,t1.to_id,t1.from_id,t1.message_id,t1.like_id,t1.date_id,t1.mobile_id,t1.mobiletype_id,t2.user_id,t2.avatar FROM status_comments AS t1 LEFT JOIN users AS t2 ON t1.from_id = t2.id_id WHERE recent_id='$recent_id'") or die ('here!');
$q_count = mysql_num_rows($q);
while ($r = mysql_fetch_array($q)){
$that_count = $that_count + 1;
$comment_id = $r['id_id'];
$to_id = $r['to_id'];
$from_id2 = $r['from_id'];
$message_id = $r['message_id'];
$like = $r['like_id'];
$date = $r['date_id'];
$mobile = $r['mobile_id'];
$mobiletype = $r['mobiletype_id'];
$fromname_id = $r['user_id'];
$thumbnail = '../media/members/thumbs/'. $r['avatar'];
$array[$comment_id] = array($comment_id,$to_id,$from_id2,$message_id,$like,$date,$mobile,$mobiletype,$fromname_id,$thumbnail);
}
krsort($array);
$array = array_slice($array, 0, 3, true);
ksort($array);
if ($q_count > 0) {
foreach($array as $key => $value) {
$that_count = $that_count + 1;
$comment_id = $value[0];
$to_id = $value[1];
$from_id2 = $value[2];
$message_id = $value[3];
$like = $value[4];
$roughdate = $value[5];
$mobile = $value[6];
$mobiletype = $value[7];
$fromname_id = $value[8];
$thumbnail = $value[9];
if ($that_count == 1 AND $recentlikecount == 0 AND $recentdislikecount == 0 AND $comments_topped != 'true') {
echo '
<div id="'. $comment_id .'" class="commentDivID" style="width:'. $commentsize .';" '. $delete_mouse_over_comment .'>
<div style="width:'. $commentsize .';height:11px;background-image:url(../lib/images/comment_top.gif);"></div>
<table style="width:'. $commentsize .';background-color:#'. $_SESSION['BGCOLOR'] .';border-bottom:1px solid #ccd4d8;">
<tr>
<td style="width:35px;height:35px;padding:5px;vertical-align:top;">
<a href="'. $extralink .'viewmember.php?id='. $from_id2 .'"><img src="'. $thumbnail .'" style="width:35px;height:35px;display:block;" /></a>
</td>
<td style="padding:5px 5px 5px 0;vertical-align:top;">
<a href="'. $extralink .'viewmember.php?id='. $from_id2 .'">'. $fromname_id .'</a> '. getEmoticon(tagUserLinks(breakUp($message_id))) .'<br />
'. $mobile .' <span id="time'. $comment_id .'" name="'. $roughdate .'" class="loadTime">'. roughDate($roughdate) .'</span></span> '. $like_link .'
</td>
</tr>
</table>
</div>';
}
}
echo ' </div>';
ここではコードを入れませんでしたが、すべてのコメントではなく、最後のコメントに class="commentDivID" が割り当てられています。
JavaScript が呼び出しを行い、ロードする新しいコメントを見つけると、class="commentDivID" の最後のコメントを削除して、ロードされた新しいコメントに配置しますが、JavaScript は新しくロードされたアイテムにアクセスできないため、もはやclass="commentDivID" を見つけることができます