0

SQL データベースからデータを取得してテーブルに出力する php ページがあります。データベースの特定の行に特定のパラメーターがある場合、その下に非表示の行が挿入され、行を展開するボタンが表示されます。これはすべて正常に機能し、ajax を使用して別のページの div にクエリを実行できますが、誰かが (jquery を使用して) 非表示の行を展開し、ajax 更新タイマーが発生すると、その行がリセットされて非表示になります。

これが記入されたページとそれに付随する 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>";

これは、行の 1 つが展開されたときにどのように見えるかのイメージです。

したがって、基本的には、ajax の更新がロールスルーされたときに行を縮小するのではなく、ページにデータを追加するだけです。助けてくれてありがとう！

4

1 に答える 1

0

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'
  }
});
于 2012-06-07T23:33:03.973 に答える