Maruf scribbled this post.
I’ve recently been working on a e-commerce site (online store) for a client. One of the features required was to show the most recently viewed items on the homepage. For that to work, I need to write a script to query a DB every 10secs or so. Youtube actually has something similar, where on the homepage they display “videos that are being viewed now”. I don’t know how they do, but this is how I do it…
Obviously it’s an AJAX affect; as always, I’ll be using the JQuery library (my personal favourite).
Here’s the OUTDATED code (find updated code below this example)…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function()
{
$('#responsecontainer').fadeOut("slow").load('response.php').fadeIn("slow");
}, 10000);
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body> |
As you can see, the JS code in the header is calling a file called response.php. That’s the file which will refresh every 10 seconds. Just change the value to increase/decrease the refresh period. The #responsecontainer div is where the response.php will be displayed.
It’s as easy as that.
If anyone uses the code, let me know how you get on 
UPDATE- Load content immediately on page load & I.E Fix
I’ve had a LOADS of people emailing us asking how to get the content in the data.php file to load immediately on pageload, and then start the refreshing process. Also, a lot of people had issues with this code in I.E. I believe I’ve managed to deal with both problems. Here’s the code for that:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body> |
Click here for an example (page should start reloading after 5 secs or so- you’ll notice the number changing). You can download the working files here.
I hope that helps! If anyone tries this updated code, please let me know if it works ok. Thanks a lot
comments
This doesn’t work in IE7 unless user has set his browser not to cache to page.
It will work in IE if you send some POST variable along the load().
IE disregards most header data not to cache the site, unless POST data is send along with the call :S
Hi,
I just want to say that it works for me.
thanks
Hey there! Your script is awesome! I am really planning to use it… still there is a problem.. looks like its not compatible with jquery tooltips. It’s like after the first refresh the tooltip won t work, and also if a tooltip was active DURING the refresh it gets stuck on the page and it won’t disappear. Do you know of any compatible tooltip with ur refresh script? Thanks a lot, ed
careful there, if you have flash content on your page while running ie, every time that div refreshes, it causes flash player to hiccup. I was recently working on a feature similar for a flash game leaderboard (http://wizarddefense.com/play/) and ran into this problem. My only solution was to make the refresh user-consented, so I wouldn’t be the one to blame
. Otherwise, this is great!
Thanks for the code but I notice JQuery tends to load and change the content before the fadeOut. So I modified the code to put the content load and fadeIn in the callback of the fadeOut, hence:
var refreshId = setInterval(function() {
$(‘#responsecontainer’).fadeOut(“slow”, function () {
$(this).load(‘response.php’).fadeIn(“slow”);
});
}, 10000);
There is probably a more elegant way of doing this.
tx
Hi, I searched for a suitable solution for refreshing my Shoutcast “Now Playing” song. I tweaked this script and paired it with the “Now playing” script from my stream host provider. It works like a charm and has a professional look (I tuned off the fade effect). Just want to say “thanks”.
All that i can say is its working for me..
thank you for document !
You could use jQuery’s built in event timer too:
.everyTime(5000,function(i){ });
Dude ,
Great ya . Thank a lot its working for me . i just look for this script
Worked great on a live stats system for me, thanks!
How would you pause or stop the refresh?
Thanks for the code. Took me a long time to find what i needed. Finaly i can rest a bit.
Question. When the page loads for the fist time it takes the amount of seconds it was set to load.
How can i get it to load right as it loads the page and then start the script time to refresh.
The page is:
http://esp.irockfm.com/wp-content/players/popup-player.php
Thanks in advanced.
Hi,
thx for this very nice & easy script!
But i´ve got a question.
What can i do load the div’s content also by loading the whole site the first time?
i only want to refresh the div´s content – not load another.
do you have any ideas?
This works really well for me. But the php script takes about 15 seconds to load initially. (By contrast, if I direct link to it or use an include, it shows almost immediately.) Is there a way to improve the initial load speed?
First of all: great script!
Does anyone already has find a ‘clean’ solution for getting the script work in IE7/8? And the first loading ‘problem’?
Thanks in advance!
Great script, so simple yet brilliant. I’ve changed it a little as I needed the divs to load immediately on page load, then refresh every 60 seconds. Here is my code:
var refreshId = setInterval(function()
{
$(‘#responsecontainer’).load(‘response.php’);
$(‘#responsecontainer2′).load(‘response2.php’);
}, 60000);
$(document).ready(function()
{
$(‘#responsecontainer’).fadeOut(“slow”).load(‘response.php’).fadeIn(“slow”);
$(‘#responsecontainer2′).fadeOut(“slow”).load(‘response2.php’).fadeIn(“slow”);
});
Thanks for the foundations, quality
Hi,
I worked on your code its very easy,simple,dynamic, i have added some more features to the code and
kept it in my client’s shopping cart.I’m very happy with this
I was googling for 4 days for my desired code
at last i found
Thanks
saideep
(PHP,CMS Developer)
Tnx Pal its really cool and works perfectly, a usful piece u know.
I absolutely love this solution for Firefox, however I am stumped with IE. The refresh returns to cached data on the first refresh. Tried turning off caching in my browser but that failed. Tried (or thought I tried) to send a POST variable along with the load but that made the refresh completely stop in both browsers. Does anyone have any ideas out there what I could do next? Any ideas would be GREATLY appreciated.
hy, i just wanna said that it works. made life easier. big thanks.
Hi. Quick question: why are you setting a refreshId var and not going right into the setInverval()? Thanks!
Thanks, but still can´t find a clean solution to the ie7/8 problem
Hey Guys,
I’ve updated the code- it should work in I.E now!
Let me know how you guys get on.
Many thanks!
Thanks for the code man!
thank you!
Hello, This code could be exactly what I need although I am having problems trying to change it. I am new to Ajax.
What I am trying to do is to get this code to work from a database. For example, I want to place this code on my members page and then set up a database for messages. The code will show a box at the top of the page and when a message is inserted into the database it appears in this box.
Ive tried to get it to work but it just shows an empty window. Any help would be really really appreciated.
Will it not slow down the users computer
Hi thank you so much for the code!
can anyone tell me that how can i add two divs on my page with this script ?
i have 2 different content for adding my page…
Hi Ridvan,
you can easily add the script two times:
$(document).ready(function() {
$(“#div-one”).load(“link-to-ajax-file”);
var refreshId = setInterval(function() {
$(“#div-one”).load(‘link-to.ajax-file’);
}, 3000);
});
$(document).ready(function() {
$(“#div-two”).load(“link-to-ajax-file”);
var refreshId = setInterval(function() {
$(“#div-two”).load(‘link-to-ajax-file’);
}, 3000);
});
Thanks! It worked for me!!!
you are awesome…..!! great work…….!!
how do i use this with noconflict,
because its not workin on my site…
http://indiecore.net
The script is not displaying links i mean there are not clickable.. how can i make them clickable? thanks.. great script
The refresh button on IE returns to cached data on the first refresh. Tried turning off caching in my browser but that failed.
Firefox and safari works great
Thanks dude.
Is there a way to make it refresh only once, or stop after the first refresh?
Nice work by the way, it works great!
Figured it out, changed setInterval to setTimeout.
Thanks for the code.
Thanks, this works for me! Any idea how I can call this function direct after adding something to the database instead of just waiting for the next refresh?
Thanks!
nvm i got it workin, just forgot to post back!
makes my radio station a lil nicer
The is still a bug with cache, when I manually refresh the page, first which is shown the value from enetring site. To avoid that I modified the code:
$(“#responsecontainer”).load(“response.php?v=”+ Math.random());
It works great.
Thanks for the great article. After searching in vain how could i reload data in my datagrid, with no hope i run through this one and BOOM! it solved my problem. A million thanks!
hi Maruf! Thanks for your great script: so easy, so quick… and so precious!
Is possible to use it for more instances? I mean: in the same page reload one div after 20 seconds, and another one after 5 seconds?
Or reload after the same period 2 different pages?
Thank you!!
Hi. I need to refresh the content from database instead of response.php. Any ideas how i can do so? And i need to display the on random
Very nice script!.. i’m not really good at this but i did this xD..
how would it be record by record, 1 by 1 tweeter style?
PS: sorry my english, i’m latinamerican.
Thanks a bunch Maruf! Your code really help me out (esp. with the nasty IE issue). Actually, seems I was still getting some weird flicker issues, but, after I modified the code, this managed to go away. Here’s my modified code of your function:
var refreshId = setInterval(function() {
$(“#page_refresh”).load(’show-comments.php?v=’+ Math.random());
}, 500);
THANKS A LOT AGAIN!
My modification is basically just kuba’s (aboe) mode to just the “v” (instead of “randval=”, along with the first part of your function taken out [$(document).ready(function() {
$("#responsecontainer").load("response.php");
]. Then, voila! Finally that horrible IE browser worked my app correctly :-].
Hi, this looks great. I’d like to use this to refresh a dynamically populated select list (values are kept in mysql table and using php to filter) without refreshing the page. Can I assume that if I replace the randomizer in response.php to the code I now use to populate the select list that the query will run at the interval? Also, can I trigger this via a jquery dialog, on close, for example?
Thanks,
Tony
I needed to load and refresh the page but only until I returned a value I was looking for. Then I needed to stop the page from refreshing. Here is how I did that:
// Global Variables
var refreshId;
$(document).ready(
function() {
// Initial page load
$(“#responsecontainer”).load(“/test/test.php”);
// Start refesh counter
refreshId = setInterval(
function() {
// This function works with $.get
function doSomethingWithData(data) {
if (data != “pending”) {
// Reload & Display
$(“#responsecontainer”).load(‘/test/test.php?randval=’+ Math.random());
} else {
// Display
document.getElementById(‘responsecontainer’).innerHTML = “Done”;
// Stop refresh counter
clearTimeout(refreshId);
}
}
// Second refresh
$.get(‘/test/test.php?randval=’+ Math.random(), doSomethingWithData);
}
, 10000); // Time between refeshes 1000 miliseconds = 1 second
}
);