Now lets say that you a web page that has a big Block of “something” and inside this “something” you would like to have some information change at a set time interval. Well with Jquery, some PHP and a sprinkle of Ajax, you can get this done quick fast and in a hurry.
The first thing you will need, is obviously the latest jQuery Javascript library file. and you will also need this light JQuery Timers Plugin. Now lets set up:
I am going to assume that you know a little about JQuery and say that you already know how to call from inside the “Head” tag. The following is basically the “meat and potatoes” if you will of what is going on.
Let’s Break it down.
1. First we say “Hey you with the class name of refreshMe, I am going to do something to you every 10 seconds. (SideNote * 1000 = 1 second; So 5,000 = 5 seconds).
2. Now we use JQuery’s built in Ajax functions to call the URL of the page we want to bring in and have it refresh the element with the class name of refreshMe with the information from this page that called. Follow? Good.
Now since for some deranged reason, I can’t get the code highlighter to work correctly Click here to see the page in action. You will be able to view source from there.
Or download it now.
Comment By: Kevin
January 30th, 2009 at 7:53 am
Will this work with an embedded flash object as the element to be changed?
Is there a maximum time for the time interval?
Cheers
Kevin
Comment By: Rich
January 30th, 2009 at 12:00 pm
Hey Kevin.
To answer your question. Yes this should work for embedded flash objects. If you have these flash objects stored in a Database, then you merely have to create the query in the refresh-me.php file or whatever you decide to name it and just have the ORDER BY RAND() function in your query.
OR
you can use a CASE/SWITCH in the refresh-me.php page and set the initial case to something like:
As far as the maximum time, I don’t see it as an issue, you should be able to place whatever time you feel necessary.
Hope this helps. If you have any other questions. just drop me another comment.
Comment By: Kevin
January 30th, 2009 at 4:38 pm
Hi Rich,
Thanks for the reply.
The flash objects are not in a database, all I’m hoping to do is use a flash audio player that calls a xspf play list by number and change the number to a different play list automatically. So I’d probably need to change the whole chunk of code that includes the play lists number.
Would that work or am I missing something?
Cheers
Kevin
Comment By: AndySowards.com :: Web Development Nerdy Daily Links For 1/31/2009 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
January 31st, 2009 at 12:50 pm
[...] Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax Useful function of jQuery that is good and interesting to know about! (tags: jquery) [...]
Comment By: Rich
February 3rd, 2009 at 3:30 pm
Kevin, Sorry for such a late reply. Maybe you could have the refresh-me.php page create a random number for the player.
So in essence, have your player inside the refresh-me page. then when the call is sent at whatever time interval you want you can just generate a random number.
so if your playlist numbers are from (0-5)
then do something like:
$playerRandNum = rand(0,5);
then use $playerRandNum to assign the playlist number in your flash.
that could work. although i am just thinking out loud and have no real experience with flash.
Comment By: My Little List of jQuery Tips, Tricks and Resources | Moral Fibre
February 5th, 2009 at 2:53 am
[...] Refreshing an element at a set time interval using jQuery & a sprinkling of Ajax [...]
Comment By: Geek Week - CSS, jQuery,Wordpress, PHP, XHTML, Web Design, web 2.0 | JasonCypret.com
February 5th, 2009 at 2:45 pm
[...] Refreshing an element at intervals using jQuery and Ajax [...]
Comment By: Rick
April 1st, 2009 at 2:10 pm
Hi Rich.
Modifying the above example to include form elements, like a text box or a radio button, if the end user has selected one of these options/entered information, how do you capture that so when the page refreshes, the values remain intact?
For example, if the page that gets refreshed as a radio button for 5 items in a list, if the end user selects item 3 via the radio button, is it possible to have the radio button still selected when the page refreshes?
Thanks,
Rick
Comment By: Rich
April 1st, 2009 at 5:58 pm
Hey Rick. If i follow you correctly, your saying for example:
You have 5 items each with a radio button. now if 1 item’s radio button is checked and the page happens to refresh, how do you keep that radio button checked when the page refreshes. is this correct?
first, the page doesn’t refresh, only the div that you specify refreshes. So if you have the radio buttons inside the same container that would refresh then you would probably have to capture that information when that radio button is checked.
but if that radio button is not inside the div container that refreshes then there shouldnt be a problem.
is this for some kind of product piece/page?
and would the item that got checked, still remain in the container while the other 4 change?
Comment By: 20 Useful PHP + jQuery Components & Tuts for Everyday Project | Noupe
April 5th, 2009 at 7:07 pm
[...] 18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax [...]
Comment By: Terhi
May 18th, 2009 at 1:46 am
Hi!
Do you happen to have a .zip file of your code? Could not open .rar with Ubuntu and I would like to take a look at your code. I’m trying to do so that after file upload tabs get refreshed via Ajax. Thanks!
Comment By: Terhi
May 18th, 2009 at 1:51 am
Oh I didn’t read the article good enough.. I realized now that I’ll see the code from the example site. So thanks again.
Comment By: links for 2010-01-22 - Roger Dickey Jr
January 23rd, 2010 at 3:06 am
[...] Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax | Web Development Now lets say that you a web page that has a big Block of “something” and inside this “something” you would like to have some information change at a set time interval. Well with Jquery, some PHP and a sprinkle of Ajax, you can get this done quick fast and in a hurry. (tags: php ajax jquery) [...]