I have a game server which has a chat function and logs all players' chat messages to my database. I'm trying to create a table that automatically updates the data but not the table itself, this is because on my table I want a dropdown list of actions for each player (kick player from server, ban player, mute player, slap player etc.) but my JavaScript code at the moment refreshes the whole table every 5 seconds. So, if I open my dropdown list, when the table refreshes it will close the dropdown list, at the moment I've changed the dropdown list to a button because of this problem.
Here is my code:
Index page that displays the table:
<?php require 'session.php';
require 'header.php'; ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('includes/online.php');
}, 3000); // refresh rate in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results2').load('includes/chatlog.php');
}, 3000); // refresh rate in milliseconds.
});
// ]]></script>
<div id="results2">Loading data ...</div><?php
include 'database.php';
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT *,current_clients.CID AS con_id FROM current_clients INNER JOIN groups ON current_clients.Level = groups.level Order By Team DESC, Score DESC";
$result = $conn->query($sql);
while( $row = mysql_fetch_array($result));
if ($result->num_rows > 0) {
echo "<div id=left>";
echo "<table class=table align=center><tr><th>ID</th><th>Name</th><th>Rank</th><th>Score</th><th>IP</th><th>Action</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
$id=$row['con_id'];
$ip=$row['IP'];
$team=$row['Team'];
// $team = str_replace("3","<tr bgcolor=midnightblue>",$team);
// $team = str_replace("2","<tr bgcolor=darkred>",$team);
// $team = str_replace("1","<tr bgcolor=grey>",$team);
$name=$row['ColorName'];
$group=$row['name'];
$name=htmlentities($name);
$name = str_replace("^0","</font><font color=black>",$name);
$name = str_replace("^1","</font><font color=red>",$name);
$name = str_replace("^2","</font><font color=lime>",$name);
$name = str_replace("^3","</font><font color=yellow>",$name);
$name = str_replace("^4","</font><font color=blue>",$name);
$name = str_replace("^5","</font><font color=aqua>",$name);
$name = str_replace("^6","</font><font color=#FF00FF>",$name);
$name = str_replace("^7","</font><font color=white>",$name);
$name = str_replace("^8","</font><font color=white>",$name);
$name = str_replace("^9","</font><font color=gray>",$name);
$score=$row['Score'];
//echo $team;
echo "<td align=center> $id </td>";
echo "<td align=center><a href='user.php?id=".$row["DBID"]."' > $name </a></td>";
echo "<td align=center> $group </td>";
echo "<td align=center> $score </td>";
echo "<td align=center> $ip </td>";
echo "<td align=center>";
echo "<form action=q3/slap.php?id=$id method=POST><button type=submit>Slap</button></form>";
echo "</td>";
echo "</tr>";
}
echo "</table>";
} else {
echo "<table class=table align=center><tr><th>ID</th><th>Name</th><th>Rank</th><th>Score</th><th>IP</th><th>Action</th></tr>";
echo "<tr>";
echo "<td>";
echo "There are no players online";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "</div>";
}
$conn->close();
?>My "online players" table is above.
</div>
You could store a timestamp on the server that you update each time a change is made on the database. Then, in your setInterval first fetch the last update time from the server and compare it to the one from when the page was loaded; if they are different refresh the page, otherwise do nothing.