I've got a page on a website that shows a table, and upon clicking on a row in the table, it can dynamically load in more results. I am new to jQuery though.
index.php page:
<!DOCTYPE html>
<html>
<head>
<title>Knife kills</title>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#list tr").bind("click", function(event) {
//Get clicked row
var clickedRow = $("#list tr#" + this.id);
//Increase clicks
if (!$(clickedRow).data("clicks")) {
$(clickedRow).data("clicks", 0);
}
$(clickedRow).data("clicks", $(clickedRow).data("clicks") + 1);
//Check if detailed information has been retrieved
if ($(clickedRow).data("detailed")) {
if ($(clickedRow).data("clicks") % 2 == 0) {
//Hide
$("#list tr#" + this.id + "row").remove();
}
else {
//Show
$($(clickedRow).data("detailed")).insertAfter($(clickedRow));
}
}
else {
var loading = $("<tr><td colspan=3>Loading...</td></tr>");
loading.insertAfter($(clickedRow));
$.ajax({
url: "ajax_detailed.php",
data: {
id: this.id
},
success: function(html) {
if (html) {
//Success
$(loading).remove();
$(html).insertAfter($(clickedRow));
$(clickedRow).data("detailed", html);
}
else {
//Error
$(loading).remove();
}
}
});
}
});
});
</script>
</head>
<body>
<table id="list">
<tr><th>#</th><th>Player</th><th>Kills</th><th></th><th></th></tr>
<?php
$con = mysql_connect("localhost", "bf4", "bf4") or die(mysql_error());
mysql_select_db("bf4") or die(mysql_error());
$query = mysql_query("SELECT p.playerId AS pid, p.playerName AS name, COUNT(`playerkills`.`id`) AS amount FROM `playerkills` JOIN players p ON playerkills.playerId = p.playerId WHERE weaponId = 9 GROUP BY playerkills.playerId ORDER BY amount DESC;") or die(mysql_error());
$i = 0;
$lastamount = -1;
$offset = 0;
while ($result = mysql_fetch_object($query)) {
if ($lastamount != $result->amount) {
$i += 1 + $offset;
$offset = 0;
}
else {
$offset++;
}
echo "\t\t\t<tr id='{$result->pid}' style='cursor: pointer;'><td>".$i."</td><td>".$result->name."</td><td>".$result->amount."</td><td></td><td></td></tr>\n";
$lastamount = $result->amount;
}
mysql_close($con) or die(mysql_error());
?>
</table>
</body>
</html>
ajax_detailed.php page:
<?php
$con = mysql_connect("localhost", "bf4", "bf4") or die(mysql_error());
mysql_select_db("bf4") or die(mysql_error());
$id = mysql_real_escape_string($_GET['id']);
echo "<tr id='{$id}row'><th></th><th></th><th></th><th>Target</th><th>Kills</th></tr>";
$query = mysql_query("SELECT p.playerName AS name, COUNT(`playerkills`.`id`) AS amount FROM `playerkills` JOIN players p ON playerkills.targetId = p.playerId WHERE weaponId = 9 AND playerkills.playerId = '{$id}' GROUP BY playerkills.targetId ORDER BY amount DESC;");
while ($result = mysql_fetch_object($query)) {
echo "<tr id='{$id}row'><td></td><td></td><td></td><td>".$result->name."</td><td>".$result->amount."</td></tr>";
}
mysql_close($con) or die(mysql_error());
?>
I have the feeling that my jQuery is way too complicated. I hope others can shed light on it.