CODEWITHSUNDEEP
javascriptphphtmlajax
Galib
Galib

Reputation: 33

Onclick function does not work after Ajax reloads the <div>

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>&nbsp;</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

Answers (1)

Roko C. Buljan
Roko C. Buljan

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

Related Questions