• Please take a moment and tell us about your project, or give us a call at (888) 873-3281.
  • Write a short description of your business and services required

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.

Profile-Ronald-Busky

Ronald Busky  Ron's ability to express our client's message in a way that drives results is remarkable. We are firm believers in ROI, and it starts with the first paragraph! Ron's robust style and diverse portfolio has allowed him to write for clients ranging from car dealers to luxury hotels.

19 Comments

  1. Kevin

    Reply

    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

  2. Rich

    Reply

    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.

  3. Kevin

    Reply

    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

  4. Rich

    Reply

    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.

  5. Rick

    Reply

    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

  6. Rich

    Reply

    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?

  7. Terhi

    Reply

    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!

  8. Terhi

    Reply

    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.

  9. Dylan

    Reply

    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
    });

    }

  10. John

    Reply

    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!”.

  11. Cottage in Yorkshire

    Reply

    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.

Trackbacks & Pingbacks

  1. 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?
  2. My Little List of jQuery Tips, Tricks and Resources | Moral Fibre
  3. Geek Week - CSS, jQuery,Wordpress, PHP, XHTML, Web Design, web 2.0 | JasonCypret.com
  4. 20 Useful PHP + jQuery Components & Tuts for Everyday Project | Noupe
  5. links for 2010-01-22 - Roger Dickey Jr
  6. 20 Useful PHP + jQuery Components & Tuts for Everyday Project | Dummies Garage V3
  7. Useful PHP + jQuery Components & Tuts for Everyday Project « Swadesh's Technology Blog
  8. 20 Useful PHP + jQuery Components & Tuts for Everyday Project | PHPVA.COM

Leave a Comment

Your email address will never be published or shared. Required fields are marked with an asterisk (*).