On a web-page I have an HTML select and a DIV-styled box. The HTML select has three values (this week, next week and next next week as numbers). When I select a week (e.g. this week) the HTML select's OnChange function starts an AJAX script, which loads the DIV-styled box with a PHP-created table, which again contains an extract from a MySQL database for the actual week. This part functions well. But I can't implement a jQuery Cell Click function on that "table".
I have tried:
// Jquery - reset/clear part..
$("#table").Click()
// {xxx} -- Does not work
// Jquery - reset/clear part..
$("#table tr td").Click()
// {xxx} -- Does not work
I have tried "ordinary" JavaScript functions. Does not work...
Is it because the table are created dynamically (from the PHP-script) - meaning jQuery works only on static tables - and what do I have to do to make it work?
Here's the codes:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.pos22 {
position: absolute;
left: 150px;
top: 25px;
width: 100px;
height: 25px;
border: 1px solid black;
}
.pos1 {
position: Absolute;
left: 50px;
top: 100px;
width: 140px;
border: 1px solid red;
}
.pos2 {
position: Absolute;
left: 190px;
top: 100px;
width: 1000px;
height: 235px;
border: 1px solid blue;
overflow: auto;
}
TR {
height: 25px;
}
TD {
height: 25px;
width: 100px;
text-align: Center;
font-family: Verdana;
font-size: 12px;
}
</style>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getuser.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<?php
$uge = date(W);
$uge1 = $uge +1;
$uge2 = $uge +2;
?>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Velg en UGE:</option>
<option value="<?php echo $uge ?>">Uge
<?php echo $uge ?>
</option>
<option value="<?php echo $uge1 ?>">Uge
<?php echo $uge1 ?>
</option>
<option value="<?php echo $uge2 ?>">Uge
<?php echo $uge2 ?>
</option>
</select>
</form>
<br>
<div id="txtHint" class="pos2"><b>Table data goes here. </b></div>
</body>
</html>
And here is the GETUSER.PHP part:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style class="text/css">
.scroll {
position: absolute;
left: 140px;
top: 0px;
width: 800px;
/* 500px */
font-family: Verdana;
font-size: 12px;
border: 1px solid blue;
overflow: auto;
}
.tab3 {
position: absolute;
left: 0px;
top: 0px;
width: 140px;
font-family: Verdana;
font-size: 12px;
border: 1px solid red;
overflow: auto;
}
table {
border: 1px solid black;
}
</style>
</head>
<body>
<?php
$klokke = array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","00");
$dage = array(" ","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lordag","Sondag");
$q = intval($_GET['q']);
$year = date(Y);
$week_no = $q;
$week_start = new DateTime();
echo"<div id='result'>11 </div>"; /* test later delete */
echo "<div class= 'tab3'>";
echo "<TABLE width='140px;' cellspacing='0' cellpadding='0' border='1'>";
echo "<TBODY>";
echo "<TR style='height: 25px;'>";
echo "<TD width='140px'> </td>";
echo "</TR>";
for ($n = 1; $n <= 7; $n++)
{
echo "<TR style='height: 25px;'>";
$week_start->setISODate($year,$week_no,$n);
echo "<TD width='140px'>".$dage[$n]." ".$week_start->format('d-M')."</td>";
echo "</TR>";
}
echo "</TBODY>";
echo "</TABLE>";
echo "</div>";
echo "<div class='scroll'>";
echo "<TABLE id='dattab' width='2400px;' cellspacing='0' cellpadding='0' border='1'>";
echo "<TBODY>";
echo "<TR style='height: 25px;'>";
for ($col = 1; $col <= 24; $col++)
{
echo "<TD width='120px;'>".$klokke[$col-1].":00-".$klokke[$col].":00</TD>";
}
echo "</TR>";
for ($row = 1;$row <= 7; $row++)
{
echo "<TR style='height: 25px;'>";
for ($col = 1; $col <= 24; $col++)
{
echo "<TD width='120px;'>C".$col."R".$row."</TD>";
}
echo "</TR>";
}
echo "</TBODY>";
echo "</TABLE>";
echo "</div>";
?>
</body>
</html>
<!--
/*
to be inplemented later !
$ c on = mysqli_connect('localhost','peter','abc123','my_db');
if (! $ con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($ c on,"ajax_demo");
$ s q l="SELECT * FROM user WHERE id = '".$q."'";
$resu lt = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($ r ow = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
*/
-->
