Insertion of Ajax polling

Question

I would like to know if its possible to insert Ajax polling into the current code I have below so the users posts update every ex amount of seconds to show any new content added to the database such as their statuses and the number of new comments added and the timestamp within a feed I've built. Here is what I have so far.

<script>
$(document).ready(function(){
     make_call();
    $("form#myform").submit(function(event) {
        event.preventDefault();
        var content = $("#toid").val();
        var newmsg = $("#newmsg").val();

        $.ajax({
            type: "POST",
            url: "insert.php",
            cache: false,
            dataType: "json",
            data: { toid: content, newmsg: newmsg },
            success: function(response){
                $("#homestatusid").prepend("<div id='divider-"+response['streamitem_id']+"'><div class='userinfo'><a href='/profile.php?username="+response['username']+"'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><div style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('"+response['streamitem_id']+"');\">X</div><a href='/profile.php?username="+response['username']+"'>"+response['first']+" "+ response['middle']+" "+response['last']+"</a><span class='subtleLink'> said</span><br/><a class='subtleLink' style='font-weight:normal;'>"+response['streamitem_timestamp']+"</a><hr>"+newmsg+"<div style='height:20px;' class='post_contextoptions'><div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_"+response['streamitem_id']+"' onclick=\"toggle_comments('comment_holder_"+response['streamitem_id']+"');clearTimeout(streamloop);swapcommentlabel(this.id);\">Write a comment...</a></div><div id='streamlike'><a id='likecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"likestatus("+response['streamitem_id']+",this.id);\"><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'>Like</div></a><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'></div></div><div id='streamdislike'><a id='dislikecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"dislikestatus("+response['streamitem_id']+",this.id);\"><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'>Dislike</div></a><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'></div></div></div><div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'><div id='comment_list_"+response['streamitem_id']+"'><table width=100%><tr><td valign=top width=30px><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><td valign=top align=left><div class='stream_comment_inputarea'><input type='text' name='content' style='width:100%;' class='input_comment' placeholder='Write a comment...'  onkeyup='growcommentinput(this);' autocomplete='off' onkeypress=\"if(event.keyCode==13){addcomment("+response['streamitem_id']+",this.value,'comment_list_"+response['streamitem_id']+"',"+response['id']+",'"+response['first']+" "+ response['middle']+" "+response['last']+"');this.value='';}\"><br/></div></div>");
            }
        });
        return false
    });
});
</script>

score 1 · Answer 1 · answered Aug 04 '12 at 14:41

1

Try this:

var intervalid = window.setInterval(function() {
  //Your ajax query here
}, intervalInMilliSec);

To cancel the interval, use this:

window.clearInterval(intervalid);

answered Aug 04 '12 at 14:41

Linuxios

31,993
12
82
110

Robin Maben · Accepted Answer · 2012-08-04T14:55:11.060

1

setInterval(function(){
    $.ajax({
            type: "POST",
            url: "insert.php",
            success : function(response){
                    //update target area with response
            }
    });
}, 10000); //try update every 10 seconds

edited Aug 04 '12 at 14:55

answered Aug 04 '12 at 14:41

Robin Maben

19,662
16
61
93

Thank you Robin. Pretty straight forward as expected. – dave Aug 04 '12 at 14:53
One question tho. I have a comment drop box..And its closing it when it does its stuff. – dave Aug 04 '12 at 14:55
@dave: I can't visualize what you mean by dropbox. You mean drop down, like `select`? Are there any event handlers attached to it? – Robin Maben Aug 04 '12 at 14:57
Write a comment... – dave Aug 04 '12 at 14:58
Can you edit your comment and post a [jsfiddle](http://jsfiddle.net) link with the code instead? – Robin Maben Aug 04 '12 at 15:00
@dave: You mean the comments section is collapsible? And you want it to be always expanded upon ajax update? What does toggle comments do? You can reverse the default or keep a flag to check before updating.. – Robin Maben Aug 04 '12 at 15:03
On a closer inspection its not closing the comment box. What is happening is when its polling its inserting the same status over and over and its moving the comment box I've opened down the page. – dave Aug 04 '12 at 15:17
How do I stop it from duplicating entries whilst still updating? As all the info is obviously in the insert.php page. – dave Aug 04 '12 at 15:27
Remember the `id` of the last comment fetched and while polling for the next pass this so that you only fetch those `n > id`. (Or later by date). This could be a `data-attribute` or a `hidden` field in the response. – Robin Maben Aug 04 '12 at 17:02

Insertion of Ajax polling

2 Answers2