Question

编辑：一切正常;推动工作。唯一的问题是每次推送时#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);

然后我有一个jQuery脚本用于实例化JSON对象（msg2），以便将每个节点附加到名为div的{{1}}中。我的问题是为什么下面的jQuery不起作用？我的猜测是#load_data在$(window).find函数中不起作用和/或我的函数超出了轮询的范围。需要注意的是，在我开始尝试合并get_person(id)和show_person()函数之前，PHP和JS 100％正常工作。如果在点击get_person() #load_button内的某个按钮时，它会切换一条信息的视图，其中div与按钮的id属性匹配value 1}}，最初是隐藏的;然后，如果单击另一个按钮，将使用.show()隐藏旧信息，并且可以看到新数据。这是我使用长轮询更新DOM元素的全面解决方案，只需在开头加载它们，但是如果在新的轮询发生时显示一条信息（.hide() var得到更新），然后timestamp内的元素将暂时从DOM中丢失，因此在单击下一个按钮之前会导致空#load_info #load_info。所以我试图添加一些额外的函数来存储div var内的DOM数据，这样在民意调查之后，先前显示的内容会重新出现。可以更改或添加什么来使这个jQuery脚本按预期工作？提前谢谢！

$person

Answer 1

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

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

$concat和$concat2无法在任何地方定义，您的意思是使用$concat_buttons和$concat_info吗？

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

在你的jQuery中，你引用了#load_info .person，但它并没有看到PHP构建的类person的div，这可能就是你的循环找不到它们的原因。

Answer 2

我发现你的问题很难理解，但我喜欢挑战。作为一个注释，我还没有测试过这些代码，因此需要对其进行调试。

现在，据我了解，你有一堆具有这种结构的按钮：

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

这个结构的一堆细节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();
    }
  });
}

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

2 个答案: