so basically I have n divs which hold comments, just like on facebook, and in Jquery I have a function that run an ajax call that gets the comments for every div, at least that's what I want it to do, it only fetches the comments for the first div on the page, how do I make the function run for each div simultaneously ?
Here is the code: Ajax
interval = setInterval(function(){
comment_id = $("#main-photo"+k).attr("commentid");
k = $("#main-photo"+k).attr("nr_crt");
$.post('../utility/countcomm.php', { comment_id: comment_id } ,
function(output) {
if (+total1 < +output)
total1 = output;
if (+total1 > +total2)
{
$.post('../utility/fetchcomments.php', { comment_id: comment_id, start:total2, end:total1 } ,
function(output1) {
$(".comment_append"+k).append("<p class='comment'>"+output1+"</p>");
var scrolldown = $('.comment_append'+k)[0].scrollHeight;
$('.comment_append'+k).animate({scrollTop:scrolldown}, 200);
});
total2 = total1;
}
});
},100);
HTML:
<div id="comment_box">
<input type="text" name="comment" id="type_comment" value="Type a comment." />
<div id="comment_append" class="comment_append<?php echo $k; ?>">
</div><!--comment_append end-->
<img id="main-photo<?php echo $k; ?>" nr_crt="<?php echo $k; ?>" class="main-photo" src="<?php echo $user_uploads['pic1'] ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" commentid="<?php echo $user_uploads['comment_id']; ?>"/>
</div><!--comment_box end-->
Every div has a different id assigned dynamically in php. Thank you.
When I read/understand your code correctly, you want to look for all images with the class main-photo, get the commentid and update the related div? In that case you need a loop over all images with that class:
interval = setInterval(function(){
// loop over all images with the class
$(".main-photo").each( function() {
// get the comment_id and k (the unique part of the id)
var $element = $(this),
comment_id = $element.attr("commentid"),
k = $element.attr("nr_crt");
// the rest is unchanged...
$.post('../utility/countcomm.php', { comment_id: comment_id } ,
function(output) {
if (+total1 < +output)
total1 = output;
if (+total1 > +total2)
{
$.post('../utility/fetchcomments.php', { comment_id: comment_id, start:total2, end:total1 } ,
function(output1) {
$(".comment_append"+k).append("<p class='comment'>"+output1+"</p>");
var scrolldown = $('.comment_append'+k)[0].scrollHeight;
$('.comment_append'+k).animate({scrollTop:scrolldown}, 200);
});
total2 = total1;
}
});
});
},100);
By the way, you should think about your periodic refresh settings (100 ms) will produce a huge amount of server requests. Depending on the amount of data, it could cause some problems.