The description:-
I have an application which fetches 30 data from a table and display them in a data-table. It shows 10 per page in DT.
Now, in each row there are three elements:-
<a href="javascript:void(0)" onclick="push_notification('<?php echo $entity;?>','<?php echo $id;?>')" title="Push Notification">
<img src="<?php echo(base_url())?>assets/images/icon/arrow_right.png" width="22" height="22" border="0" alt="Push Notification" onload="chat_review('<?php echo $id;?>')"/></a>
<a href="<?php echo base_url();?>admin/<?php echo $entity;?>/<?php echo $entity;?>_chat/<?php echo $id;?>" title="Chat">
<div class="ch_comment" id="chatReviewDiv_<?php echo $id;?>"><?php if($row['chat_count']>0){?><div class="notify"><?php echo $row['chat_count'];?></div><?php }?></div>
</a>
As you can see, an tag has an onload event, which call this function:-
function chat_review(post_id)
{
if($('#table tr').length > 1 && $('td[colspan]').not('[colspan=1]'))
{
$.post('<?php echo base_url();?>ajax-function',
{'data':'chat',
'id': post_id,
'action': 'count'},
function(data) {
$("#chatReviewDiv_"+data.id).empty();
if(data.chatCount > 0)
{
$("#chatReviewDiv_"+data.id).append("<div class='notify'>"+data.chatCount+"</div>");
}
setTimeout(function(){
chat_review(data.id)
},25000);
}, 'json');
}
}
This is actually server polling which checks in every 25 secs. The purpose of this function is to check whether an new message has been received for this post.
Now, since datatable loads the table with all data, but just shows them in pages, 100 data means 100 times this function will be called. As such, sometimes the browser is becoming non-responsive too.
Is there any solution to fix this issue?