Jquery/Javascript only running a custom function once after CSS changes

Question

I'm using Jquery to draw lines between the cells in a web-based spreadsheet application. I accomplish this with a mixture of background-image , background-position and background-repeat . The entire system is working very nicely, and allows me to map between different cells in the application.

However, I'm having some trouble with my Jquery/Javascript code.

function draw_line(start_row, start_col, finish_row, finish_col){
    //Change CSS background properties
}

function loadData(){
    for (i = 0; i < values; i++){
        //Add element to spreadsheet - change CSS properties.

        //Draw line between the two cells
        draw_line(start_row, start_column, line, column);
    }
}

loadData();

The problem is that although the for loop should run several times for all the elements involved, it will actually only run once . However, if I comment out the draw_line function, the for loop executes the correct number of times, and all of the elements get placed on the spreadsheet.

I've also tried running setTimeout, but that didn't help. Anyone every experienced this sort of behavior before? (Just for reference, I'm running JQuery v1.6.4, on FF)

Hope someone can help. Thanks!

Answer 1

I have no idea if this is actually causing your problem, but it's bad and risky code so you should fix it. This line of your code:

for (i = 0; i < values; i++)

is using an implicitly declared global variable as i . If any other code you are running is also doing that, then the value of i will get trounced and wreck your for loop.

Change that line to this to make i a local variable so nothing else can trounce it:

for (var i = 0; i < values; i++)