Recent News
Copyright © 2014 THAT Agency . All Rights Reserved.
410 Evernia Street, Suite 118, West Palm Beach, FL 33401
Tel: (561) 832-6262 | Fax: (561) 832-7707

Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

13 Jan Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

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.

18 Comments
  • Kevin
    Posted at 07:53h, 30 January

    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

  • Rich
    Posted at 12:00h, 30 January

    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.

  • Kevin
    Posted at 16:38h, 30 January

    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

  • 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?
    Posted at 12:50h, 31 January

    […] 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) […]

  • Rich
    Posted at 15:30h, 03 February

    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.

  • My Little List of jQuery Tips, Tricks and Resources | Moral Fibre
    Posted at 02:53h, 05 February

    […] Refreshing an element at a set time interval using jQuery & a sprinkling of Ajax […]

  • Geek Week - CSS, jQuery,Wordpress, PHP, XHTML, Web Design, web 2.0 | JasonCypret.com
    Posted at 14:45h, 05 February

    […] Refreshing an element at intervals using jQuery and Ajax […]

  • Rick
    Posted at 14:10h, 01 April

    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

  • Rich
    Posted at 17:58h, 01 April

    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?

  • 20 Useful PHP + jQuery Components & Tuts for Everyday Project | Noupe
    Posted at 19:07h, 05 April

    […] 18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax […]

  • Terhi
    Posted at 01:46h, 18 May

    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!

  • Terhi
    Posted at 01:51h, 18 May

    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.

  • 20 Useful PHP + jQuery Components & Tuts for Everyday Project | Dummies Garage V3
    Posted at 08:09h, 28 February

    […] 18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax […]

  • Dylan
    Posted at 05:15h, 12 July

    Can you use multiple refreshes on a single page with this?
    or would you know if you could with prototypes

    function getFrequests()
    {
    new Ajax.Updater(‘notificationbox’, ‘php/notifications/get_frequests.php’, {
    method: ‘get’, frequency: 1, decay: 1
    });

    }

  • John
    Posted at 14:26h, 21 April

    Rich,

    I know you put this up over 2 years ago, but I was struggling for some time on a problem and this example gave me the “light bulb” moment that led to a perfect solution.

    Just wanted to say “Thanks!”.

  • Useful PHP + jQuery Components & Tuts for Everyday Project « Swadesh's Technology Blog
    Posted at 22:12h, 20 July

    […] 18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax […]

  • 20 Useful PHP + jQuery Components & Tuts for Everyday Project | PHPVA.COM
    Posted at 04:42h, 29 July

    […] 18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax […]

  • Cottage in Yorkshire
    Posted at 04:30h, 09 November

    your post is so nice and very informative,thanks to share this very important and
    knowledgeable information ,I hope that it will be very helpful for all.