長輪詢更新DOM，同時保存來自jQuery的累積屬性

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); 

然後，我有用於實例化JSON對象（msg2），用於附加每一個節點到一個名爲#load_datadiv一個jQuery腳本。我的問題是爲什麼下面的jQuery不起作用？我的猜測是$(window).find不能在get_person(id)函數中工作和/或我的功能超出了查詢的範圍。需要注意的是，在開始嘗試使用show_person()和get_person()函數之前，PHP和JS是100％工作的。當點擊#load_buttondiv中的某個按鈕時，按鈕會切換一條信息視圖，其中id與按鈕的value屬性和.show()屬性相匹配，該屬性最初是隱藏的;那麼如果點擊另一個按鈕，舊信息將被隱藏，並且將看到新的數據。這是我使用長輪詢來更新DOM元素的全面解決方案，只需在開始時加載它們即可，但是如果在新輪詢發生時顯示一條信息（vartimestamp獲得更新），那麼內部元素#load_info將暫時從DOM中丟失，因此導致一個空的#load_infodiv直到下一個按鈕被點擊。所以我試圖添加一些額外的功能來存儲DOM數據在var$person裏面，以便在任何之前顯示的輪詢之後重新出現。可以改變或添加什麼來獲得這個jQuery腳本按預期工作？提前致謝！

var timestamp=null; 
    function waitForMsg() { 
     $.ajax({ 
      type: "GET", 
      url: "getData.php?timestamp="+timestamp, 
      async: true, 
      cache: false,   
      success: function(data) { 
       var json=eval('('+data+ ')'); 
       if (json['msg'] != "") { 
        $("#load_buttons").empty(); 
        $("#load_buttons").append(json['msg']); 

        // Update any person divs that were already visible. 
        $('#load_info .person').each(function() { 
         // Grabs the ID from data-person-id set earlier. 
         var id = $(this).data('person-id'); 
         show_person(id); 
        }); 

       } 
       timestamp = json["timestamp"]; 
       setTimeout("waitForMsg()",1000); 
      }, 
      error: function(XMLHttpRequest,textStatus,errorThrown) { 
       setTimeout("waitForMsg()",15000); 
      }     
     }); 
    } 

    $(document).on('click', '.mybutton', function() { 
     $('#load_info').empty(); 
     show_person(this.value); 
    }); 

    function show_person(id) { 
     $('#person-detail-' + id).remove(); 
     get_person(id).appendTo('#load_info'); 
    } 

    function get_person(id) { 
     var $person = $(window).find('id:contains(id)'); 

     var $div = $('<div>', { 
      'class': 'person', 
      'data-person-id': id, 
      id: id 
     }); 

     $person.find(h1).text.appendTo($div); 
     return $div; 
    } 

Answer 1

我發現你的問題很難理解，但我喜歡挑戰。作爲說明，我沒有測試過任何這些代碼，因此需要進行調試。現在

，據我所知，你有這個結構的一系列按鈕：

<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(); 
    } 
    }); 
} 

Answer 2

它看起來就像你有一個問題在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。