Solved

Polling Server & Updating multiple DIVs using jQuery or Javascript?

Posted on 2011-03-07
3
887 Views
Last Modified: 2012-08-13
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
Comment
Question by:RedBullLee
3 Comments
 
LVL 9

Expert Comment

by:gery128
ID: 35066119
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
 
LVL 8

Accepted Solution

by:
McNetic earned 500 total points
ID: 35067229
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
 

Author Comment

by:RedBullLee
ID: 35072183
Thanks for the replies, both of you.

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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now