Sign in to follow this  
spirre

[web] AJAX div refresh

Recommended Posts

I have a php page with this. <div id="refreshablediv"> include_once('pagetobeincluded.php'); </div> Now I want to refresh that div every 30 seconds or so hence refresing the included page, and I think AJAX can do this for me. But I haven't found anything about this on the web. Is it possible ? Can somebody please point me in the right direction.

Share this post


Link to post
Share on other sites
ajax.js

var request;
var UniqueRequestedID = 0;

function InitRequest()
{
var succesfull = false;

try
{
request = new XMLHttpRequest();
succesfull = true;
} catch (trymicrosoft) {
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
succesfull = true;
} catch (othermicrosoft) {
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
succesfull = true;
} catch (failed) {
request = false;
}
}
}

return succesfull;
}
function getRequestedDocument(page)
{

if (InitRequest())
{
UniqueRequestedID = UniqueRequestedID + 1;
var url = escape(page) + '?REQ=' + UniqueRequestedID;
request.open("GET", url, true);
request.onreadystatechange = ShowDocument;
request.send(null);
}
else
{
//error
}
}

function ShowDocument()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
document.getElementById('refreshablediv').innerHTML = request.responseText
} else {
//file not found
}
}
}





index.html

<script src="ajax.js" type="text/javascript"></script>
<div id="refreshablediv"></div>
<a onclick="getRequestedDocument('pagetobeincluded.php');">Refresh Div</a>





[edit]
use this function to create a timer to refresh the content every second. (search google for more information about this)
window.setTimeout(FunctionYouWantToCall,1000);

Share this post


Link to post
Share on other sites
Many thanks. I'm using this now with setTimeout.
Works like a charm in Firefox. But in IE6 it works kind of sloppy (surprise?).
It doesn't seem to refresh the php page correctly. Cause on that page som database queries are runned to decide what is to be displayed. But in IE6 it does not seem to get the new values in the database.

Share this post


Link to post
Share on other sites
Quote:
Original post by spirre
Many thanks. I'm using this now with setTimeout.
Works like a charm in Firefox. But in IE6 it works kind of sloppy (surprise?).
It doesn't seem to refresh the php page correctly. Cause on that page som database queries are runned to decide what is to be displayed. But in IE6 it does not seem to get the new values in the database.

The "?REQ=" part should ensure that. If you already have get-data in the request, try changing it to "&REQ=" instead.

That, or maybe have your PHP script send "Cache-control: no-cache" in the header.

Share this post


Link to post
Share on other sites
Quote:
Original post by spirre
Yes, i found out it was a caching problem.
And by putting ?REQ= Math.random() it now works as it should.

That's kinda weird. royteusink's code should take care of the caching problem by itself, unless the URL already has get-data. If it does, adding "?REQ=" + Math.Random() shouldn't help anything.

Even if it does work, it's a bad idea to use a random function to get by caching problems, since it could return the same number twice in a row. Could you post your exact code?

Share this post


Link to post
Share on other sites
javascript.js:


var request;
var UniqueRequestedID = [[[0]]];

function InitRequest()
{
var succesfull = false;

try
{
request = new XMLHttpRequest();
succesfull = true;
} catch (trymicrosoft) {
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
succesfull = true;
} catch (othermicrosoft) {
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
succesfull = true;
} catch (failed) {
request = false;
}
}
}

return succesfull;
}
function getRequestedDocument(page)
{

if (InitRequest())
{
UniqueRequestedID += Math.random();
var url = escape(page) + '?REQ=' + UniqueRequestedID + '&uid=' + uid;
request.open("GET", url, true);
request.onreadystatechange = ShowDocument;
request.send(null);
}
else
{
//error
}
}

function ShowDocument()
{
if (request.readyState == [[[4]]])
{
if (request.status == [[[200]]])
{
document.getElementById('refreshdiv').innerHTML = request.responseText
setTimeout('getRequestedDocument("path/to/page.php")',[[30000]]);

} else {
//file not found
}
}

}





script call:


<div id="refreshdiv"></div>
<script type="text/javascript" src="path/to/javascript.js"></script>
<script type="text/javascript">
var uid = <?php echo $uid; ?>;
getRequestedDocument('path/to/page.php');
</script>



Share this post


Link to post
Share on other sites
Quote:
Original post by Coward
Quote:
Original post by spirre
Yes, i found out it was a caching problem.
And by putting ?REQ= Math.random() it now works as it should.

That's kinda weird. royteusink's code should take care of the caching problem by itself, unless the URL already has get-data. If it does, adding "?REQ=" + Math.Random() shouldn't help anything.

Even if it does work, it's a bad idea to use a random function to get by caching problems, since it could return the same number twice in a row. Could you post your exact code?

You can never completely trust the client's cache. Adding a random parameter is an adequate solution.
I always use the time as a random number. That should pretty much avoid duplicate numbers in most cases.
"?REQ=" + (new Date()).getTime();

Share this post


Link to post
Share on other sites
Quote:
Original post by WanMaster
You can never completely trust the client's cache. Adding a random parameter is an adequate solution.
I always use the time as a random number. That should pretty much avoid duplicate numbers in most cases.
"?REQ=" + (new Date()).getTime();

You misunderstood. My point is that the code provided by reutusink should take care of the caching problem without the need to change anything. (UniqueRequestedID = UniqueRequestedID + 1; var url = escape(page) + '?REQ=' + UniqueRequestedID;) The only reason it shouldn't would be if he already had getdata in the URL, which he doesn't.

My second point was that using a random number to ensure that caching problems will not happen is a bad idea. In his example, if random returns 0, there will still be a possibility for problems. You time solution is fine, since the time will be unique every time, hence it isn't random.

Share this post


Link to post
Share on other sites
Quote:
Original post by Coward
Quote:
Original post by WanMaster
You can never completely trust the client's cache. Adding a random parameter is an adequate solution.
I always use the time as a random number. That should pretty much avoid duplicate numbers in most cases.
"?REQ=" + (new Date()).getTime();

You misunderstood. My point is that the code provided by reutusink should take care of the caching problem without the need to change anything. (UniqueRequestedID = UniqueRequestedID + 1; var url = escape(page) + '?REQ=' + UniqueRequestedID;) The only reason it shouldn't would be if he already had getdata in the URL, which he doesn't.

You're right, I hadn't examine the original code properly, and didn't spot the UniqueRequestedID thing.
Quote:
Original post by Coward
My second point was that using a random number to ensure that caching problems will not happen is a bad idea. In his example, if random returns 0, there will still be a possibility for problems. You time solution is fine, since the time will be unique every time, hence it isn't random.

Yep, that what I meant.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this