Javascript 长轮询以更新DOM，同时保留jQuery中累积的属性

编辑：一切正常；这项工作很重要。唯一的问题是每次按下时#load_info

div

都会重置为空。如何在

div

中保留原始内容，尽管在重新推送XML文件时内容本身会是更新版本。

我有一个PHP脚本，用于长时间轮询XML文件并将其编码为JSON数组。它从前端调用，以JSON作为参数

    $filename= dirname(__FILE__)."/people.xml";

    $lastmodif = isset( $_GET['timestamp'])? $_GET['timestamp']: 0 ;
    $currentmodif=filemtime($filename);

    while ($currentmodif <= $lastmodif) {
        usleep(10000);
        clearstatcache();
        $currentmodif =filemtime($filename);
    }

    $response = array();
    $xObj = simplexml_load_file($filename);

    // Loop for #loadMe.
    foreach($xObj as $person){
        $concat_buttons .= "<button class='mybutton' value='" . (string)$person->id . " '> " . (string)$person->fullName . "</button>";
    }

    // Loop for #toadMe.
    foreach($xObj as $person){
        $concat_info .= "<div class='div div_' data-person-id='" . (string)$person->id . "' id='" . (string)$person->id . "'><h1> " . (string)$person->job . "</h1></div>";
    }


    // Output for AJAX.
    $response['msg']                = $concat_buttons;
    $response['msg2']                = $concat_info;
    $response['timestamp']      = $currentmodif;
    echo json_encode($response);

---

看起来您在PHP脚本中生成JSON时遇到了问题：

$response['msg']  = $concat;
$response['msg2'] = $concat2;

$concat

和

$concat2

在任何地方都没有定义，您的意思是使用

$concat\u按钮

和

$concat\u信息

$response['msg']  = $concat_buttons;
$response['msg2'] = $concat_info;

---

在jQuery中，您引用了

#load_info.person

，但它看起来不像PHP构建的div是类

person

，这可能就是循环找不到它们的原因。

我发现您的问题很难理解，但我喜欢挑战。值得注意的是，我还没有测试过这段代码，因此需要对其进行调试

现在，据我所知，你有一堆这样结构的按钮：

<div id="load_buttons">
  // repeater
  <button class="mybutton" value="$person['id']">$person['fullName']</button>
  // end repeater
</div>

---

您使用

$（窗口）的意图是什么。查找（'id:contains（id）'）

？@Kyle Kyle，我试图用它来创建一个变量，用于记录

#load_info

容器中的当前元素，因此该变量可用于重新显示下一次推送之前显示的元素；如果之前显示了任何内容，请单击“发布”按钮。感谢您指出这一点。但是，我正在测试的实时代码没有这个错误。我重命名了问题帖子的变量，忘记了重命名您指出的语句。我已经用你的修正更新了我的问题。很抱歉出现语法错误，但根问题仍然存在。我还重新措辞了我的问题，使其更有意义。这看起来不错，但与我的尝试大不相同。很抱歉，我的回答太晚了。我试图用我的原型实现它；我会留下另一条评论来描述我的结果。

<div id="load_buttons">
  // repeater
  <button class="mybutton" value="$person['id']">$person['fullName']</button>
  // end repeater
</div>

<div id="load_info">
  // repeater
  <div class="div div_" data-person-id="$person['id']" id="$person['id']">
    <h1>$person['job']</h1>
  </div>
  // end repeater
</div>

success: function(data) {
    var json=eval('('+data+ ')');
    var $buttons;
    var $infos;
    if (json['msg'] != "") {
      addButtons($(json['msg']));
      addInfos($(json['msg2']));
    }
    timestamp = json["timestamp"];
    setTimeout("waitForMsg()",1000);
}

addButtons = function($buttons){
  // loop through the button json data
  $buttons.each(function(){
    // look to see if the button already exists
    var existing = $('[value='+$(this).attr("value")+']').length;
    if(!existing){
      // if not, add the button and assign a click handler
      $(this).appendTo('#load_buttons').click(function(){
        //hide all the children of info
        $('#load_info').children().hide();
        //show the info based on the button value
        $('#'+$(this).val).show();
      });
    }
  });
}
addInfos = function($infos){
  //loop through the info json data
  $infos.each(function(){
    // check to see if an info exists
    var existing = $('#'+$(this).attr("id")).length;
    if(!existing){
      //if not, add the info to the list and set it to hidden
      $(this).appendTo('#load_info').hide();
    }
  });
}