When I run this code the page repeats its self. I also need it to refresh, which it isn’t doing.
Like this:
EDITED code below:
<?php include 'config.php' ?>
<script language="javascript">
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
}
return req;
}
// Make the XMLHttpRequest object
var http = createRequestObject();
function sendRequest(page) {
// Open PHP script for requests
http.open('get', page);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// Text returned FROM the PHP script
var response = http.responseText;
if(response) {
// UPDATE ajaxTest content
document.getElementById("msgstatus").innerHTML = response;
}
}
}
function repeatloop()
{
sendRequest('test.php'); // replace "inbox-status.php" with your php page's url
setTimeout("repeatloop()", 10000);
}
var replacementDiv = document.createElement("div");
replacementDiv.innerHTML = response;
document.getElementById("msgstatus").innerHTML = replacementDiv.firstChild.innerHTML;
window.onload=function() {
repeatloop();
}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body>
<?php // Collet Latest Posts
$query = "
SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname
FROM Wall
INNER JOIN Users ON Wall.UserID = Users.UserID
ORDER BY Wall.MessageID DESC
LIMIT 20;";
$result = mysql_query($query) or die('Invalid query: ' . mysql_error());
// Collet Post User
?>
<div id ="container">
<div id="insideleft">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="profile.php">Edit Profile</a></li>
<li><a href="wall.php">Community Wall</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
<div id="insideright">
<h1>Community Wall</h1>
<br />
<div id="postcontainer">
<form method="post" action="wall.php" name="wallpost" id="wallpost">
<input type="text" name="message" id="message" class="message" />
<input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br />
</fieldset>
</form>
</div>
<span id="msgstatus">
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<div id="messagecontainer">
<img class="pic" src="dummy.gif">
<p class="messageposter">
<?php echo "<b>{$row['Forename']} {$row['Surname']}</b><br />"; ?>
</p>
<p class="message">
<?php echo stripslashes($row['Message']); ?>
</p>
</div>
</span>
<?php
} ?>
Firstly – as Michael pointed out, you should be using a div for msg status:
Second – assuming the example file is called test.php, you’re loading the entire content of the page back into the
msgstatussub-element (rather than just the SQL). You’d actually be doing this to infinity, except that browsers don’t allow executable code to be posted in an AJAX reply (so the second embedded tier is being ignored).I’m assuming you’ve simplified out of your code, but following is the updated code based on what you posted. NOTE there’s a bit of a style difference (feel free to ignore ;)!), you also included a
BRinp.MESSAGEPOSTERwhen the paragraph was handling the newline (so I removed it).Some other points:
If you’re going with an AJAX solution, you might want to consider leaving the box empty in the starting HTML (drop latestsPosts(); at line 118), and then load the list once the page is rendered.
The way this is currently coded, every 10 seconds the complete list is reloaded by AJAX, you may want to track the latest post (perhaps by ID?) and pass that back to the AJAX command so that either:
Because this is a dynamic AJAX script you should be using the POST verb, not GET (it also requires some changes to how you post variables – the
+'?'+varsin thehttp.openline needs to be in the body instead). Technically GET allows the browser to cache the results – I particularly notice this on Internet Explorer (ironically it seems they followed the W3C spec on this while the others don’t). Long story short – some users may complain the messages don’t stay up to date.