I have a file (load.php) that is loaded on a "div" every second inside my home page (home.php). load.php has some JavaScript functions that get the values (cells[i].innerHTML) of a row, but the functions do not work when load.php is loaded on home.php, but works perfectly when load.php is loaded directly or included to home.php. both loading the page and calling the javascript function on load.php are the core functionality of this web app, please some assistance will be appreciated. below are the codes for both home.php and load.php
home.php
<html>
<head>
</head>
<body>
<div id="showReload"></div>
<script type="text/javascript">
window.onload = function(){
let showReload = document.getElementById('showReload');
function reload(div, file){
loadDiv(div, file);
setTimeout(function(){
reload(div, file);
}, 1000);
}
reload('showReload', 'load.php');
}
function loadDiv(div, files){
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(div).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET',files,true);
xmlhttp.send();
}
</script>
</body>
</html>
load.php
<?php
echo date("Y/M/D,H:i:s");
$host = 'localhost';
$user = 'root';
$pass = '';
$db_name = 'dataBaseName';
$mysqli = new mysqli($host, $user, $pass, $db_name) or die("Connect to database failed");
$fetch = $mysqli->query("SELECT * FROM doctors WHERE status = 1");
if (!$fetch) {
echo "Failed to fetch data from database";
return false;
}
if ($fetch->num_rows > 0) {
while ($row = $fetch->fetch_assoc()) {
$fname = $row['firstname'];
$mname = $row['middlename'];
$lname = $row['lastname'];
$phone = $row['pnumber'];
$id = $row['ID'];
?>
<table id="table">
<tr>
<td class="hide"><?php echo $id; ?></td>
<td><?php echo $fname; ?></td>
<td><?php echo $mname; ?></td>
<td><?php echo $lname; ?></td>
<td><?php echo $phone; ?></td>
</tr>
</table>
<?php
}
}
?>
<script type="text/javascript">
let table = document.getElementById('table'),
rows = document.getElementsByTagName('tr'),
cells = document.getElementsByTagName('td'),
i;
for (i = 0; i < rows.length; i++){
rows[i].onclick = function(){
console.log(this.cells[3].innerHTML);
}
}
</script>