I have an issue with my onclick function that only works the first time. Every time the onclick function triggers an ajax request, it successfully reloads a div which contains code to retrieve values from SQL and build an HTML table using a for loop.
Although the table refreshes correctly and adds new values from the database, the onclick function stops working when I click on table elements. However, if I manually refresh the table, it starts working again but still only once.
I'm not sure what I'm doing wrong here. Can someone help?
Below is my onclick function along with the Ajax code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#main tbody').on('click', 'td', function () {
$irow = $(this).parent().index();
$icol = $(this).index();
console.log(" row and column: ");//to debug
console.log($irow);//to debug
console.log($icol);//to debug
$.ajax({
type: "POST",
url: "check_db.php",
data: { 'srow' : $irow,
'scol' : $icol
},
success: function(data) {
alert(data);
console.log(data);
$("#view").load(" #view > *")
}
});
});
});
</script>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
And here is the code inside the main div:
<body>
<h1>Welcome <?php echo $_SESSION["username"] ?> </h1>
<div id="view">
<?php
$sql = "SELECT username, row, col FROM seats";
$result = $link->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$outer_array[]=$row;//FILLING OUTER_ARRAY EACH ROW AS SEPARATE ARRAY.
// echo "<br>"."username: " . $row["username"]. " - row: " . $row["row"]. " col: " . $row["col"]. "<br>";
}
}else{
echo "0 results";
}
//======================Loop to create table starts from here!!!=================================
$nrows= 9; // Number of rows in table
$counter_row=0;//counter to use inside loop to match desired row value
$ncols=6;// Number of columns in table
$counter_col=0;//counter to use inside loop to match desired column value
echo '<table id = "main" style="width:100%"><tbody>';
for ($row = 0;$row<$nrows;$row++) {
echo "<tr>";
for ($col = 0;$col<$ncols;$col++) {
for ($i = 0;$i<count($outer_array);$i++) {
if (($outer_array[$i]['row']==$counter_row)&&($outer_array[$i]['col']==$counter_col)){
$uname = $outer_array[$i]['username'];
break;
} else {$uname = "free";}
}
if ($uname=="free"){
echo "<td style='background-color:green;color:black'> </td>";
}elseif($uname!= $_SESSION["username"])
{ echo "<td style='background-color:yellow;color:black'>$uname</td>";
} else echo "<td style='background-color:orange;color:black'>$uname</td>";
$counter_col++;
if($counter_col==$ncols){$counter_col=0;}
}
echo "</tr>";
$counter_row++;
}
echo '</tbody>';
echo '</table>';
?>
</div>