AJAX는 테이블을 재설정하지 않고 테이블에 데이터를 추가합니다.

Question

데이터베이스에서 특정 행에 특정 매개 변수가있는 경우 SQL 데이터베이스에서 데이터를 가져와 테이블로 인쇄하는 PHP 페이지가 있습니다. 행을 확장하는 단추가 숨겨진 행 아래에 삽입됩니다. 이것은 모두 잘 작동하고 다른 페이지의 div에 ajax를 사용하여 쿼리 할 수 ​​있지만 jquery를 사용하여 숨겨진 행을 확장하고 Ajax 업데이트 타이머가 나타나면 재설정하여 해당 행을 숨길 수 있습니다.

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#query").load("query.php"); 
    var refreshId = setInterval(function() { 
     $("#query").load('query.php'); 
    }, 5000); 
    $.ajaxSetup({ cache: false }); 

}); 
</script> 

<div id="query"></div> 

을 그리고 query.php에서 :

while($row = mysql_fetch_array($result)) 
    { 
     $decoded = json_decode($row['B'],true); 
     $r = $decoded['r']; 
     $t = $decoded['t']; 
     $l = $decoded['l'];  
     $g = $decoded['g'];  
     $tp = (int)$t + 3;    

     echo "<tr>"; 
     echo "<td>" . $row['ID'] . "</td>"; 
     echo "<td align=\"center\"><font color=\"red\">[$t]</font></td>"; 
     echo "<td align=\"center\"><font color=\"blue\">[$r]</font></td>"; 
     echo(((int)$t != 0) ? '<td><button class="expand stylebutton">+</button>' : '<td>'); 
     echo $row['Name_'] . "</td>"; 
     echo "<td>" . $row['Date_'] . "</td>"; 
     echo "<td>" . $row['IP'] . "</td>"; 
     echo "<td>" . $row['G'] . "</td>"; 
     echo "<td>" . $row['A'] . "</td>"; 
     echo "<td>" . $row['Add'] . "</td>"; 
     echo "<td>" . $row['Remove'] . "</td>"; 
     echo "<td>" . $row['Comments'] . "</td>"; 
     echo "</tr>"; 
     if((int)$t != 0) 
    { 
      echo "<tr class=\"b\"style=\"display: none;\">"; 
      echo "<td></td><td colspan=\"$tp\"><div style=\"color: #FC0;\"> Local:</div>"; 
      foreach($l as $ll) 
      { 
      echo $ll . "<br>"; 
      } 
      echo "<br><div style=\"color: #F00;\">Global:</div>"; 
      foreach($g as $gg) 
      { 
      echo $gg . "<br> "; 
      } 
      echo "</td></tr>"; 
    } 
    } 
    echo "</table>"; 
echo "<script type=\"text/javascript\">"; 
echo "$(document).ready(function() { 
     $(\".stylebutton\").click(function(){ 
      $(this).parent().parent().next().toggle(); 
     if($(this).text() == \"+\") 
     { 
      $(this).text('-'); 
     } 
     else 
     { 
      $(this).text('+'); 
     } 
     }); 
}); 
</script>"; 

Here's an image of what one of the rows looks like when expanded.

그래서 기본적으로 여기에

는 아약스 코드에 충전 페이지가 그것으로 이동하는 것입니다 Ajax 업데이트가 진행될 때 행이 축소되는 것을 원하지 않지만 대신 페이지에 더 많은 데이터를 추가하십시오. 어떤 도움을 주셔서 감사합니다!

Answer 1

jQuery에서 사용할 json 형식의 데이터를 PHP 파일에 반환해야합니다. html 태그를 대체하고 UI를 취소하는 대신 데이터를 대체합니다.

예를 들어

PHP 코드 :

$data_array = array(); 

while($row = mysql_fetch_array($sql)) { 
    array_push($row['some_row'] , $data_array); // add the data to an array that will later be json encoded 
} 

echo json_encode($data_array); 

jQuery를

$.ajax({ 
    url: 'query.php', 
    success: function(data) { 
    alert('This is the JSON: ' + JSON.stringify(data)); 
    $('#selector').text(data.some_row); // place the data inside the element with id = 'selector' 
    } 
});