Trying to increment a javascript counter when using polling ajax http requests

Question

Hi, I have a script that is running every 5 seconds, as a polling ajax http request.

I want to send an incrementing amount through it, on each request (1,2,3,4,5,6 etc...)

I have this so far, but the code just sends '1' through all the time.

// set the value to 1
   var state = {
    recordId: 1
   };

  $.ajaxPoll({
      url: "map-service.cfc?method=getpoints",
      type: "POST",
            data: state,
      dataType: "json",
      successCondition: function(location) {
         // return result != null; // custom condition goes here.

   // increment it by 1
   state.recordId = state.recordId +1 
   alert(state.recordId)

}

Does anyone know how to submit an increasing value through the 'data' param in the POST?

Answer 1

You have to make sure you are not setting the state.recordId over and over again each time you execute the function that calls the .ajaxPoll() method. state = ... should be in a parent scope of the function that runs .ajaxPoll() maybe something like this:

(function() {        // <== Our scope

    // set the value to 1 only once!
    var state = {
        recordId: 1
    };

    // The function that runs the poll. Do not set recordId to 1 inside here!
    var callPoll = function() {

        $.ajaxPoll({
            url: "map-service.cfc?method=getpoints",
            type: "POST",
                data: state,               // state.recordId will be 1, 2, 3, ...
            dataType: "json",
            successCondition: function(location) {
                // return result != null;          // custom condition goes here.

                // increment it by 1
                state.recordId = state.recordId +1 
                alert(state.recordId)
            }
         });

    };

    $(function() {  // <== on doc ready 

        // Your functionality etc...... for example:
        setInterval(callPoll, 1000);

    });    
}());              // <== Execute the anonymous function we're using as our scope

Answer 2

Probably a copy of state object is closed inside the anonymous function which will always start with it's initial value unless the changes are made outside of closure before it's closed/created. For verification just replace that incremental line with following

window.recordId = window.recordId + 1 // Making it global variable 

You can find a very basic introduction to closures here http://msdn.microsoft.com/en-us/magazine/cc163419.aspx

Can you pass state object as a variable to successCondition anonymous function? That way you will always get the actual copy

Answer 3

You could also set a data variable to the document or body and increment that.

$('body').data('recordId', 1);

$.ajaxPoll({
   url: "map-service.cfc?method=getpoints",
   type: "POST",
   data: {recordId: $('body').data('recordId')},
   dataType: "json",
   successCondition: function(location) {
     // return result != null; // custom condition goes here.
     // increment it by 1
     newRecord = $('body').data('recordId');
     $('body').data('recordId', newRecord+1);
      alert($('body').data('recordId'));
   }
});