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!

Looking at your function loadData, where do the variables values, start_row, start_column, line, and column get declared and defined? — Kevin
– Kevin, Commented Nov 4, 2011 at 2:25
@Kevin Both methods jump 100 lines of code, so I just skimmed both of them to make the problem clearer. They're each part of an array, and they get loaded right before adding the element to the spreadsheet. — Petre Pătraşc
– Petre Pătraşc, Commented Nov 4, 2011 at 2:30
sounds like classic incorrect use of closures problem. without seeing your whole code, no one will be able to help you. you may have unknowing removed the code that causes the issues when you condensed the code for us — mkoryak
– mkoryak, Commented Nov 4, 2011 at 2:49

jfriend00 · Accepted Answer · 2011-11-04 02:45:21Z

2

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++)

answered Nov 4, 2011 at 2:45

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Petre Pătraşc Over a year ago

This fixed it. Oddly enough, I nearly always use the var keyword just because it's good practice, but I forgot to in this case. Still, doesn't change the fact that I was expecting some other behavior from the language - normally if I want to make something global, I'll declare it as global, or declare it outside my functions. This was a real eye-opener, and I appreciate your comment! Goes to show how loosely typed languages can creep up on you with unexpected surprises. Thanks!

jfriend00 Over a year ago

You may want to investigate using strict mode where this would have been an error. See developer.mozilla.org/en/JavaScript/Strict_mode for more info.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related