[SOLVED] Refresh div

Brian W · September 22, 2008

I have a div(i can make it a table or whatever is needed) that contains a repeat region of rows in my database. That works fine, i'm fine it php. I want just that div(or whatever) to reload every 10 seconds so that I get the most recent information. can this be done using ajax or simply js?

CroNiX · September 22, 2008

You would need to use ajax since you need to grab more data from the database. You might be able to use an iframe with some sort of javascript refreshing the frame.

Brian W · September 22, 2008

i realize i need ajax... thats why i posted here. can someone please point me in the correct direction?

F1Fan · September 23, 2008

In your JS, you'll need this:

function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
	try{
		xmlhttp = new XMLHttpRequest();
	} catch (e){
		xmlhttp = false;
        }
}
return xmlhttp;
}
var http = getHTTPObject();

Plus your JS function that loads the PHP data:

function changeDiv(){
var url = "somefile.php";
http.open("GET", url, false);
http.send(null);
document.getElementById('somediv').innerHTML = http.responseText;
}

Then, in your "somefile.php," just echo what you want in your div.

If you want to pass on variables, just push them to your JS file, then pass them onto your url variable like you would any other URL string.

Finally, add an event that calls the JS function,

Brian W · September 23, 2008

i don't know anything about javascript or ajax... just enough so sorda understand that logic you gave me. where should I look for the function to run the function ever 10 seconds or whatever? am i looking for keywords like "refresh" because I haven't really found anything like that on google yet.

Also, my div content will be a repeat region from a mysql quarry. I have that in a separate .php file like you said, do i need to take any extra steps to get that to work? no strings are passed per se.

Thank you

Brian W · September 23, 2008

<script type="text/javascript">function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
	try{
		xmlhttp = new XMLHttpRequest();
	} catch (e){
		xmlhttp = false;
        }
}
return xmlhttp;
}
var http = getHTTPObject(); 

function changeDiv(){
var url = "pieces.php";
http.open("GET", url, false);
http.send(null);
document.getElementById('pieces').innerHTML = http.responseText;</script>
<div id="pieces" onLoad="window.setInterval("changeDiv()", 6000);"> </div>

This did not work... please critique

thank you

JasonLewis · September 23, 2008

Hm, I believe this:

http.open("GET", url, false);

Should be this:

http.open("GET", url, true);

Also, try putting the onLoad in the body tag.

Brian W · September 23, 2008

<script type="text/javascript">function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
	try{
		xmlhttp = new XMLHttpRequest();
	} catch (e){
		xmlhttp = false;
        }
}
return xmlhttp;
}
var http = getHTTPObject(); 

function changeDiv(){
var url = "pieces.php";
http.open("GET", url, true);
http.send(null);
document.getElementById('pieces').innerHTML = http.responseText;</script>
</head>

<body  onLoad="window.setInterval("changeDiv()", 6000);">

<div id="pieces"></div>

Tried this, not seeming to work.

JasonLewis · September 23, 2008

You're not closing the changeDiv function anywhere, you just close the script. If you are using something like Firefox, check Firebug (add-on).

Brian W · September 23, 2008

GOOD CALL... firebug reports allowed me to fix it the javascript to the point it is now actually requesting pieces.php every 6 (now set to 10) but I get this error from firebug.

Firebug needs to POST to the server to get this information for url:
http://www.************/pieces.php

Brian W · September 23, 2008

NEVER MIND... sorry...

You guys rock, that worked... thank you.

F1Fan · September 23, 2008

Sorry, I forgot the refresh part. Add "setTimeout("changeDiv",10000);" at the end of your function. That will make the function run every 10 seconds (10 * 1000 ms) once it is ran by the onload event that ProjectFear suggested.

Sign In

[SOLVED] Refresh div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information