Question

I’m trying to implement simple Comet chat example and for this I implemented Long polling which calls itself recursively every 30 seconds.

When pressing on button I want another ajax request to send new data on Server using POST.

For now I just put alert to this function to trigger click event

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var polling = function poll(){
    $("#postMessage").click(function () {
    alert("request");
    });
    $.ajax({ dataType: 'json',url: "CometServlet", success: function(data){

            if (data !=null){
      $('#message').append(data.sender+" : " + data.message+"<br />");
            }
    }, complete: poll, timeout: 30000 });
}
$(document).ready(polling)

</script>

And my HTML is like this:

<div>
   <input type="button" id="postMessage" value="post Message">
</div>
<div id ="message" name="message"></div>

When I click on button my alert is shown several times. Why? How can I solve it?

Answer 1

As Dave mentions, that’s not what the timeout option is for. Try something using setTimeout instead. Also, you’re mixing your polling logic and your click handler (I think). Here’s how you would separate them:

function poll() {
    $.ajax({ 
        dataType: 'json',
        url: "CometServlet", 
        success: function(data){
            if (data !=null){
                $('#message').append(data.sender+" : " + data.message+"<br />");
            }
        },
        complete: function () {
            setTimeout(poll, 30000);
        }
    }); 
}

$(document).ready(function () {
    $("#postMessage").click(function () {
        alert("request");
    });

    poll();
});

Example: http://jsfiddle.net/VyGTh/