Coffeescript Ajax -- can't get variable to work outside of function?

Question

So i have this coffeescript function:

thestring = ""
$.get '/ajax/questions', (data) -> 
    counter = 0
    dataLength = data.length
    while counter < dataLength
        thestring += "<option value=test>it wont work</option>"
        counter++   

console.log(thestring)
$("#question"+(numfilters+1)).append thestring

in my case, data is an array of arrays of length 2, (ex: [[hello,test],[hi,moretest]] ). The problem seems to be that my variable, "thestring", is only changed locally inside the function. When I attempt to log what the value is, i simply get whatever i initially assigned it (in this case the empty string). What I'm trying to do here is append options to a dynamically generated select box based on the data received from the ajax request.

$.get is an async function - you need a callback! You're trying to log thestring before the call has finished. Also, ditch that while loop and use for loop. — tymeJV
– tymeJV, Commented Aug 13, 2015 at 20:05
any reason why for loops are better? I used js2.coffee to translate a javascript for loop and for some reason it turned it into a while loop in the coffeescript. — Daniel Ciotoli
– Daniel Ciotoli, Commented Aug 13, 2015 at 21:12
I suppose it's just preference - but typically while loops are used for reading data from a file - your data has a set end (the length) - so a for seems more appropriate — tymeJV
– tymeJV, Commented Aug 13, 2015 at 21:13

xdumaine · Accepted Answer · 2015-08-13 20:06:55Z

1

This is an asynchronous function, so the code inside the callback will be set aside to be executed after the ajax request completes, and the rest of the top level function completes first. Just move your code for handling the result inside of the callback function:

thestring = ""
$.get '/ajax/questions', (data) ->
    # The code here will be run *after* the ajax function completes
    # This is called a callback 
    counter = 0
    dataLength = data.length
    while counter < dataLength
        thestring += "<option value=test>it wont work</option>"
        counter++   

    console.log(thestring)
    $("#question"+(numfilters+1)).append thestring

# Any code after here will execute immediately 
#  (i.e., before the ajax function completes)
# So if you access `thestring` here, it will still be empty
console.log thestring

answered Aug 13, 2015 at 20:06

xdumaine

10.4k7 gold badges65 silver badges107 bronze badges

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

4 Comments

Daniel Ciotoli Over a year ago

Ah! makes sense. However, for some reason i can't append to the select box variable inside the callback scope. Any reason why this might happen?

xdumaine Over a year ago

Can you elaborate on what you mean by "can't"? Are you getting any errors?

Daniel Ciotoli Over a year ago

By can't I mean that nothing happens when i put the append jquery inside the callback. I get no errors thrown but no options are added. I know that it is not because "thestring" is empty, because i check it right before i append it with console.log and it always logs the correct string. Is this a problem with scopes?

xdumaine Over a year ago

@DanielCiotoli can you log console.log $("#question"+(numfilters+1)) to ensure you're actually selecting the correct element?

Daniel Ciotoli · Accepted Answer · 2015-08-14 15:14:33Z

0

I figured out why it wasn't appending to the select box. The variable "numfilters" was getting increased before it was evaluated in the asynchronous call. To solve this i assigned a new variable called "jaxfilters" right before the asynchronous call, which takes whatever value that numfilters has and is not increased.

answered Aug 14, 2015 at 15:14

Daniel Ciotoli

336 bronze badges

Collectives™ on Stack Overflow

Coffeescript Ajax -- can't get variable to work outside of function?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related