JavaScript / jQuery访问新加载的ajax数据

时间:2012-10-26 17:43:14

标签: javascript ajax json

我有一个像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信息。

我该怎么做?


这是我的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”

3 个答案:

答案 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 - 它不应该在哪里过。

谢谢大家的帮助!