I would like to know the solution on how to make my PHP webpage/table update itself automatically in real time without having to refresh the page. The page works perfectly fine.
For example, If a user submits data this page will update itself automatically displaying the new users data. I have made research and it involves ajax. I have tried some attempts but it messes up the page. Any assistance would be kindly appreciated.
<html>
<head>
<title>Seminar Overview</title>
</head>
<h1><center>Seminar Overview</center>
<body background="cloud.png">
<h4><p><a href="add.php">Create Seminar</a></p><h4>
<h4><p><a href="index.php">Admin Login</a></p><h4>
<center>
<?php
//DISABLE ERRORS
error_reporting(E_ERROR);
//ESTABLISH DATABASE SERVER CONNECTION
$con = mysql_connect ("194.81.104.22", "", "");
if (!$con) {
die("Can not connect: " . mysql_error());
}
//MYSQL QUERY & DATABASE SCHEMA
mysql_select_db("db12408543", $con);
$sql = "SELECT * FROM Register";
$seminaroverview = mysql_query($sql,$con);
$data = mysql_query($sql,$con);
//TABLE
echo "<table border=4 table width=1000>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Surname</th>
<th>Telephone</th>
<th>Address</th>
<th>Date of Registration</th>
<th>Email</th>
<th>Registered Seminar(s)</th>
</tr>";
//MYSQL DATA TO BE DISPLAYED THROUGH PHP TABLE
while($record = mysql_fetch_array($data)) {
echo "<tr>";
echo "<td>" . $record['idRegister'] . "</td>";
echo "<td>" . $record['Name'] . "</td>";
echo "<td>" . $record['Surname'] . "</td>";
echo "<td>" . $record['Telephone'] . "</td>";
echo "<td>" . $record['Address'] . "</td>";
echo "<td>" . $record['Dateofregistration'] . "</td>";
echo "<td>" . $record['email'] . "</td>";
echo "<td>" . $record['SeminarAttended'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
</center>
</body>
</html>
Real time attempt
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() { // set Interval function to carry out same operation in the time specified
$('#main').load('seminar-overview.php #main > *'); // Reloads 'seminar-overview.php' table every 6 seconds as <div> tag is specified and closed after table
}, 6000);
});
</script>
OK, so after you populate your table for the first time you will need to send the form data to another PHP page via an ajax request. The example js code below (using jQuery) will execute a new PHP page with POST variables from a form named #updatePage. Then it will set the table contents to the pages output. Here it is:
$('#updatePage').submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: "/path/to/script.php",
data: form.serialize(),
type: 'post',
dataType: 'html',
success: function(data) {
$('table').html(data);
},
error: function(xhr, status) {
alert("Sorry, there was a problem!");
},
});
});
The script.php might look something like this:
<?php
$newData = //MySQL functions to get data using POST vars
echo "
<tr>
<td>" . $newData . "</td>
</tr>
";
?>
That's the basic idea and you should be able to modify your code to make this work.