• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 917
  • Last Modified:

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!
0
RedBullLee
Asked:
RedBullLee
1 Solution
 
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
 
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
 
RedBullLeeAuthor Commented:
Thanks for the replies, both of you.

McNetic - I managed to get that working with some modification - many thanks.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now