[jQuery] Scoping issue with load and call back function.

[Stever]

I am a relative newbie to Jquery and I am getting some scoping issues
I can't figure out.

I was hoping for some advice.

Basically I am trying to load multiple documents that have HTML tables
and then parse the tables and redisplay in a new format. Merging
elements from the different documents.


So basically I build the url path for a set of "devices"  and load
them. I thought in the load function I could collect elements into
global variables and manipulate in the final document. But is not
working.

The variables TableCells, TableRowName and TableColName are what I
have issues with.


$(document).ready(function(){
  $.ajaxSetup({cache: false}) ;

  var TableCells    =[,];
  var TableRowName  =[,];
  var TableColName  =[,];

 for( var i =0; i < devList.length; i++)
  {
    // set the path
    var path = prefix + yield_dir + devList[i] +'/' + smslot_yield;
    //clear the display area
    $('#display').html("");

   var colName =[];
   var rowName =[];
   var cellValue = [];

    //load the page but collect the table info
    if (firstLoad == 1)
    {

      $('#display').load(path,
                               function(){


                                 manipulate tables and put data in
Global Array
                                  TableCells[i]   = cellValue;
                                  TableRowName[i] = rowName;
                                  TableColName[i] = colName;


                                });
    }
  }
});



So the variables are defined in the document ready scope. (I even
tried outside that as well)
 var TableCells    =[,];
 var TableRowName  =[,];
 var TableColName  =[,];

I set these variables in the load function scope and they are
accessible there and work fine.

However when I try to access outside the load function the variables
are undefined.

Can you tell what I am missing?

Thanks,

Steve