ansaurus

Question

jQuery AJAX live update on multiple elements on the same page

Answer 1

+3 A:

Send all of the ids at once as a JSON array. On the server side, build a JSON object containing key/value pairs of the ids/counts. Then iterate through the keys on the client when you get the result and set each count in turn in the related DIV.

$(document).ready(function(){
   //ajax.php is called every second to get view count from server
   var ajaxDelay = 1000;
   var ids = [];
   $('[id^="zone-"]').each( function() {
      ids.push( this.id );
   });
   setInterval(function(){
            $.ajax({
                url: 'ajax.php',
                dataType: 'json',
                type: 'get',
                data: { refresh: 'hits', ids: ids },
                success: function(data) {
                    for (var key in data) {
                        var div = $('#zone-' + key).html( data[key] );
                    }
                }
            });
    }, ajaxDelay);
});

tvanfosson 2009-08-14 10:34:30

Answer 2

A:

Thanks for the JSON suggestions, I wasn't quite sure how to implement it though and I've come up with this solution that works quite well so far. Feedback would be great.

    <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        setInterval(function(){
       $('.views').each(function(){
        $(this).load('ajax.php?id='+this.id);
       });
      }, 5000);
     });  
    </script>

And in the HTML you just assign the class 'views' to the element that you want updated and the store the 'ID' as the id eg:

<p class="views" id="123"><!-- content appears here. --></p>

paperclip 2009-08-14 13:21:14

ansaurus

tags:

views:

answers:

jQuery AJAX live update on multiple elements on the same page

related questions