我有一个像facebook这样的网站。每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>
所以上面有两个帖子,数据库中的前两个帖子,每个帖子都有评论。当页面首次加载时,PHP将查找最后一条注释并为其分配一个类。
它分配了一个“checkForNewComments”类,因此我的JavaScript可以获取其comment_id ID。
它将该ID发送到新页面以查找该帖子上具有更大值的注释,并且它将通过jSon格式的Ajax调用加载它们。我解析它,然后.append()它到“newComments”部分。
因此,如果代码找到新的评论,它将删除帖子的“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信息。
我该怎么做?
<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
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”
答案 0 :(得分:0)
尝试将最新评论设置为全局javascript变量(在函数调用之前)。一旦您的ajax调用完成更新最新评论,请更新计数器以获取最新评论。
答案 1 :(得分:0)
完成此操作后:
$("#postnewcomment" + data.loadComs[i].id).html(data.loadComs[i].script);
您应该能够从您使用的ID开始选择添加的HTML中的任何内容,例如:
$("#postnewcomment" + data.loadComs[i].id + " div")
在新添加的内容中选择div。
答案 2 :(得分:0)
我明白了 - 这很愚蠢。
我将数据附加到新的DIV,而不是我为特定的类选择器查找的那个,所以如果当然javascript无法找到div - 它不应该在哪里过。
谢谢大家的帮助!