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

[Josh Nathanson]

OK it looks like you have a few things to sort out here.

One thing is that you have to remember that load is asynchronous.  So when
that is fired the rest of your code will continue along its merry way.  In
other words the loop will keep looping independent of the callback function
firing.  My hunch is that this will give you unexpected values for the
variable [i] in the load callback function.  Because of this you will
probably have to do some refactoring to get the results you're looking for.
Not sure though if you intend to run that load on every iteration of the
loop or just the first one.

Also you may have left this out, but I see you have a firstload = 1
declaration, but then you don't set it to 0.  This could also be messing up
your results as it will run every time unless you set it to 0 somewhere.

Definitely leave the variable declarations outside document ready as in your
second email.

-- Josh

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Stever
Sent: Wednesday, May 06, 2009 4:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Scoping issue with load and call back function.


Josh thanks for the quick response.

I tried putting the variables

var TableCells    =[,];
var TableRowName  =[,];
var TableColName  =[,];
 outside the document ready function.  Originally. (not redefined with
var inside document ready shown here).


<script type="text/javascript" src="http://www.hou.asp.ti.com/
sparcit_data_reports//js/jquery.js"></script>
<script type="text/javascript">
var devList  = [
                "PART_1"
               ];

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

$(document).ready(function(){
  $.ajaxSetup({cache: false}) ;
  var firstLoad = 1;
  for( var i =0; i < devList.length; i++)
  {
    // set the path
    var path = url + devList[i] ;
   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;

      });
       var lenTable2 = TableColName[i].length;

    }
  }

});


So where I try to access the new length of TableColName[i]  I get that
this variable is undefined.

Actually while debugging, I find that variable i defined in the loop
outside the load, is NOT available inside the load function.

It is all very confusing.

:-(



On May 6, 6:10 pm, "Josh Nathanson" <joshnathan...@gmail.com> wrote:
> When you say you get undefined outside the load function, do you mean
> outside $(document).ready, or inside $(document).ready?
>
> They should not be accessible outside document.ready, because of the
closure
> caused by passing the anonymous function to document.ready, and because
you
> use var to declare them inside that function.
>
> If you want them to be accessible globally, you'll have to declare them
> outside document.ready.
>
> -- Josh
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of Stever
> Sent: Wednesday, May 06, 2009 3:54 PM
> To: jQuery (English)
> Subject: [jQuery]Scopingissuewith load and call back function.
>
> I am a relative newbie to Jquery and I am getting somescopingissues
> 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