[web] AJAX div refresh
Author
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.
ajax.js
index.html
[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);
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);
Author
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.
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.
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.
Author
Yes, i found out it was a caching problem.
And by putting ?REQ= Math.random() it now works as it should.
And by putting ?REQ= Math.random() it now works as it should.
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?
Author
javascript.js:
script call:
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>
Quote:Original post by CowardQuote: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();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.
Quote:Original post by CowardQuote: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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
