Solved

Polling Server & Updating multiple DIVs using jQuery or Javascript?

Posted on 2011-03-07
3
892 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…

773 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