AJAX add data to table without resetting table. - php

Question

I have a php page that will grab data from an SQL database and print it into a table, now if certain rows from the database have a certain parameter, a hidden row is inserted below that with a button to expand the row. This all works fine and I can query it with ajax into a div on a different page, but if someone were to expand the hidden row (with jquery) and the ajax update timer were to come along, it would reset and hide that row.
Here is the page that it is filled into and the ajax code to go with it:
<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>
And from the 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.
So basically I don't want the rows to contract when the ajax update rolls through, but instead just add more data on to the page. Thanks for any help!

Answer 1

You should have the php file return the data in json format to be used by your jQuery. Instead of replacing the html tags and causing your UI to retract, you will replace the data.
For Example
Your php code:
$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'
}
});