Auto refresh table without refreshing page PHP MySQL

php mysql html-table chat reload

38,956

Solution 1

The technique is called AJAX and one of the easiest libraries to add to the project would be jQuery. I assume your issue isn't with JavaScript, but with the idea of reloading the entire page.

UPDATE Because I'm such a nice guy ;) This should work, more or less, I haven't tried it out, so there might be a typo or two:

<?php

$host="****";
$user="****";
$password="****";

$cxn = mysql_pconnect ($host, $user, $password);

mysql_select_db("defaultdb", $cxn);

if (getenv(HTTP_X_FORWARDED_FOR)) {
$ipaddress = getenv(HTTP_X_FORWARDED_FOR);
} else {
$ipaddress = getenv(REMOTE_ADDR);
}

$message = nl2br(strip_tags(nl2br($_POST["message"])));
if (isset($_POST['submitButton'])) { 
if ($message != "") {
mysql_query("INSERT INTO ChatTest (ID, TimeStamp, Message) VALUES ('$ipaddress', NOW(), '$message')");
}
header('Location: chat.php');
}

$message = "";

$data = mysql_query("SELECT * FROM ChatTest ORDER BY TimeStamp DESC") or die(mysql_error()); 

$tbl = '';
$tbl .= "<table border cellpadding=3 width='100%' style='table-layout:fixed'>
"; 
$tbl .= "<tr>"; 
$tbl .= "<th style='width:10%;'>ID:</th><th style='width:10%;'>TimeStamp:</th><th style='width:70%;'>Message:</th>";
while($info = mysql_fetch_array( $data )) { 
$tbl .= "
<tr>"; 
$tbl .= " <td>".$info['ID'] . "</td> "; 
$tbl .= " <td>".$info['TimeStamp'] . " </td>";
$tbl .= " <td style='white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word'>".$info['Message'] . "</td></tr>
"; 
} 
$tbl .= "</table>"; 

mysql_close($cxn);

if (isset ($_GET['update']))
{
    echo $tbl;
    die ();
}

?>
<html><head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head><body><center>
<form action="chat.php" method="post">
Message: <br><textarea type="text" name="message" style="width:80%; height:300px;"></textarea><br>
<input type="submit" name="submitButton"/> <a href="http://www.****.com/chat.php"><button name="Refresh Chat">Refresh Chat</button></a>
</form>
<div id="messages" style="width:100%;">
  <?php echo $tbl; ?>
</div></center>
<script type="text/javascript">
$(document).ready (function () {
    var updater = setTimeout (function () {
        $('div#messages').load ('chat.php', 'update=true');
    }, 1000);
});
</script>
</body></html>

As for coding techniques, you might want to look into SQL-injections and maybe writing cleaner HTML, but I'm sure you'll get there :)

Solution 2

the only way you would do it without javascript is to use an iframe for the chat interface, and a meta refresh.

but why not use javascript?

38,956

Author by

Albert Renshaw

CEO, Apps4Life, LLC.

Updated on July 16, 2022

Comments

Albert Renshaw almost 2 years

I have a very simple chat system I've built using PHP and MySQL (this is my second day ever using these languages) and I am wondering if there is any way to auto refresh the table data I'm pulling from my database and loading into an html table via PHP without having something like Javascript go and reload the whole web page... just reloading the html table with the data in it that PHP filled it up with.... Does that make sense?

Here is my code if it helps (for /chat.php)

<html><head></head><body><center>
<form action="chat.php" method="post">
Message: <br><textarea type="text" name="message" style="width:80%; height:300px;"></textarea><br>
<input type="submit" name="submitButton"/> <a href="http://www.****.com/chat.php"><button name="Refresh Chat">Refresh Chat</button></a>
</form>
<div style="width:100%;">

<?php

$host="****";
$user="****";
$password="****";

$cxn = mysql_pconnect ($host, $user, $password);

mysql_select_db("defaultdb", $cxn);

if (getenv(HTTP_X_FORWARDED_FOR)) {
    $ipaddress = getenv(HTTP_X_FORWARDED_FOR);
} else {
    $ipaddress = getenv(REMOTE_ADDR);
}

$message = nl2br(strip_tags(nl2br($_POST["message"])));

if (isset($_POST['submitButton'])) { 
    if ($message != "") {
        mysql_query("INSERT INTO ChatTest (ID, TimeStamp, Message) VALUES ('$ipaddress', NOW(), '$message')");
    }
    header('Location: chat.php');
}

$message = "";

$data = mysql_query("SELECT * FROM ChatTest ORDER BY TimeStamp DESC") or die(mysql_error()); 
 Print "<table border cellpadding=3 width='100%' style='table-layout:fixed'>
        "; 
 Print "<tr>"; 
 Print "<th style='width:10%;'>ID:</th><th style='width:10%;'>TimeStamp:</th><th style='width:70%;'>Message:</th>";
 while($info = mysql_fetch_array( $data )) { 
 Print "
        <tr>"; 
    Print " <td>".$info['ID'] . "</td> "; 
    Print " <td>".$info['TimeStamp'] . " </td>";
    Print " <td style='white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word'>".$info['Message'] . "</td></tr>
            "; 
 } 
 Print "</table>"; 

mysql_close($cxn);


?>

</div></center></body></html>