Polling Server & Updating multiple DIVs using jQuery or Javascript?

Hi Folks,

I've tried a few different things to accomplish this, all without success so far.

Here's what I have;

- A page on the site has 3 elements that need to be 'dynamically' updated.  These are simple counts (notifications, messages, updates)

- At the moment, I'm using the jHeatbeat jQuery plugin (http://www.jasons-toolbox.com/JHeartbeat/) to run the update script (i_updater.cfm).  This script queries the database and puts the relevant count data into a session variable.  As jHeartbeat also allows some data to be returned to a DIV, I currently have it successfully updating the 'notifications' div.

- There are 2 further divs I need to update (preferably at the same time, rather than polling the server 3 times unnecessarily).  Again, these just need to be updated with a session variable - no fancy content, images etc.

I've tried using jQuery 'text' within the updater script, but couldn't get it to work at all - whether that is because it won't work when it's being called from another script I'm not sure (I'm a Javascript/jQuery newbie!).

I also tried simply adding multiple jHeartbeat instances, however that would only ever load up the last one (i.e 3 instances, the first 2 were ignored).  However, even if I had that working, it wouldn't have been preferable.

Any pointers much appreciated!
RedBullLeeAsked:
Who is Participating?
 
McNeticCommented:
You can implement this by using setTimeout and simple ajax() calls with jquery. Say you have your 3 divs somewhere on your page, like this:
<div id="notifications">...</div>
<div id="messages">...</div>
<div id="updates">...</div>

Open in new window


Your i_updater.cfm should output something like this:
<div>
  <div id="notifications">...</div>
  <div id="messages">...</div>
  <div id="updates">...</div>
</div>

Open in new window


It would then work roughly as follows:

$(document).ready(function () {
  function updateDivs(){
    $.ajax({
      type: "GET",
      url: "i_updater.cfm",
      dataType: "xml",
      success: function(result) {
        result = $(result);
        $('div#notifications').text(result.find('div#notifications').text());
        $('div#messages').text(result.find('div#messages').text());
        $('div#updates').text(result.find('div#updates').text());

        setTimeout(updateDivs, 5000);
      }
    });
  };
  
  setTimeout(updateDivs, 5000);
});

Open in new window


The setTimeout call starts the function updateDivs after 5000 Milliseconds (adjust this as you like). The function will start an xmlhttp request to your server, and replace the text content of your divs with that of the divs returned by i_updater.cfm on success. Then, another timeout is started, so the calls can't overlap.
If you want to be 100% sure this never stops, even if a single xml request fails, you'll have to start another timeout in an error event handler of the ajax request.
0
 
gery128Commented:
You have not specified which server side language you are using, but apart from using HeartBeat plug-in, you can always use simple JavaScript to make asynch calls to your web-service which can return multiple values which are needed in your case.
0
 
RedBullLeeAuthor Commented:
Thanks for the replies, both of you.

McNetic - I managed to get that working with some modification - many thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.