Reputation: 33
My onclick function works only first time. After onclick function triggers an ajax request, inside success function, I reload a which wraps the code that retrieves values from SQL and build html table with for loop.
Although it refreshes the table correctly (it adds new values from db correctly), the onclick function stops reacting when I click the table elements. But when I refresh the table, it starts to work again, but still for only 1 time
What am I doing wrong?
Here is my onclick function together with Ajax:
<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 my code inside the 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 SEPERATE 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;}//to reset counter column at the end of each row
}
echo "</tr>";
$counter_row++;
}
echo '</tbody>';
echo '</table>';
?>
</div>
Upvotes: 0
Views: 1220
Reputation: 206565
Use the first static element (#view
in your case) as your Event Delegator:
$('#view').on('click', 'td', function () {
To explain further, since on AJAX success you rebuild the entire contents of your static #view
, the TBODY in $('#main tbody')
is a completely new element which does not delegates any more the initial click events.
Upvotes: 4