PDA

View Full Version : onload / auto refresh

absoleet
11-10-2009, 10:53 PM
I have some samlpe ajax code i have been toying around with.

I have it updating & working properly, but you have to click a button first.

How can I set it so that it automatically reads the contents of the text file on page load, and updates every 1000ms?


I was trying onload=setinterval(JavaScript:xmlhttpPost("status.php"),1000) but had not luck

Any suggestions?

Code below.

<?

$myFile = "testFile.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, 3);
fclose($fh);
echo $theData;

?>

<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}

function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}

function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
</head>
<body>
<form name="f1">
<p>word: <input name="word" type="text">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("status.php")'></p>
<div id="result"></div>
</form>
</body>
</html>
thenajsays
11-10-2009, 11:02 PM
try setting a timeout?
seco
11-10-2009, 11:18 PM
try this. replace everything

you will see a page.php and a div-id and the interval, change those


<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
// EDIT this div id to yours
document.getElementById("div-id").innerHTML = response;
}

}

}

function repeatloop()
{
//edit this page name to yours
sendRequest('page.php');
setTimeout("repeatloop()", 1000);
}

window.onload=function() {
repeatloop();
}
</script>


just make a div and give it an appropriate id
absoleet
11-11-2009, 01:40 AM
Thanks for the quick response!

I have copied that javascript into an HTML file, and im getting 'error on page' with unexpected results.

I'm not sure what you mean by give it a <div>

edit: I got it i got it!

thanks seco!
seco
11-11-2009, 01:51 AM
no problem, keep it handy
absoleet
11-11-2009, 01:52 AM
ok so I got it going...

The HTML page reads the php page which is reading the text file contents.

However when I modify the textfile, the html page does not update to display the contents of the text file :(

<html>
<head>

<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
// EDIT this div id to yours
document.getElementById("status").innerHTML = response;
}

}

}

function repeatloop()
{
//edit this page name to yours
sendRequest('status.php');
setTimeoutl("repeatloop()", 1000);
}

window.onload=function() {
repeatloop();
}
</script>


</head>
<body>
<div id="status"></div>
</body>
</html>

<?

$myFile = "testFile.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, 3);
fclose($fh);
echo "<img src=\"bar.jpg\" width=\"$theData%\" height=\"10\">";

?>
absoleet
11-11-2009, 04:33 AM
Bump^

Still seeking help