problems with async jquery and loops
        Posted  
        
            by Seth Vargo
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Seth Vargo
        
        
        
        Published on 2010-06-13T05:58:13Z
        Indexed on 
            2010/06/13
            6:02 UTC
        
        
        Read the original article
        Hit count: 322
        
I am so confused. I am trying to append portals to a page by looping through an array and calling a method I wrote called addModule(). The method gets called the right number of times (checked via an alert statement), in the correct order, but only one or two of the portals actually populate. I have a feeling its something with the loop and async, but it's easier explained with the code:
moduleList = [['weather','test'],['test']];
for(i in moduleList) { $('#content').append(''); for(j in moduleList[i]) { addModule(i,moduleList[i][j]); //column,name } }
function addModule(column,name) { alert('adding module ' + name); $.get('/modules/' + name.replace(' ','-') + '.php',function(data){ $('#'+column).append(data); }); }
for each array in the main array, I append a new column, since that's what each sub-array is - a column of portals. Then I loop through that sub array and call addModule on that column and the name of that module (which works correctly). Something buggy happens in my addModule method that it only adds the first and last modules, or sometimes a middle one, or sometimes none at all... im so confused!
© Stack Overflow or respective owner