Solved

Polling Server & Updating multiple DIVs using jQuery or Javascript?

Posted on 2011-03-07
3
896 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
AngularJS: ng-repeat 25 54
Geolocation works...sometimes 2 36
AJAX Create / Update Not working MVC 5 62
Date Picker is picky (about something) 4 40
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
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…
Suggested Courses

739 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