Question

I am stuck here, any help would be appreciated.

I have a listbox of items, and I want to retrieve data on each item in the list via AJAX (which calls a webservice). The retrieved data needs to be manipulated based on which row it was called from.
If I pass in the row parameter, its value is always one greater than the number of rows.
Is there a way to pass in the value it had at the time the ajax call was initiated?

    var NumRows = list.options.length;
    for ( var row = 0; row < NumRows; row ++ )
    {
      var Value = list.options[row].value;
      var xmlHttpObj = CreateXmlHttpRequestObject();
      if ( xmlHttpObj != null )
      {
        xmlHttpObj.open( "POST", "Async.ashx?arg1=GetPhysicalPathInfo&arg2=" + Value, true );
        xmlHttpObj.onreadystatechange = function ( row )
        {
          // code that needs to know what row we were from
        }
      }
      xmlHttpObj.send();
    }

Answer 1

Create a closure with a self-executing function:

var NumRows = list.options.length;
for ( var row = 0; row < NumRows; row ++ )
{
  !function(row) {
      var Value = list.options[row].value;
      var xmlHttpObj = CreateXmlHttpRequestObject();
      if ( xmlHttpObj != null )
      {
        xmlHttpObj.open( "POST", "Async.ashx?arg1=GetPhysicalPathInfo&arg2=" + Value, true );
        xmlHttpObj.onreadystatechange = function ()
        {
          // code that needs to know what row we were from
        }
      }
      xmlHttpObj.send();
  }(row);
}

Of course, it’s a major red flag that you’re issuing AJAX requests from a loop. This is highly inefficient; consider making one call and returning an array from the server.