jQuery - Variable Scope Problem

Question

I have the following javascript:

      $.getJSON('/calculate_quote/' + moulding_1_id, function(data) {
        moulding_1_cost = data.moulding.cost;
        moulding_1_width = data.moulding.width;
      });
      cost_of_moulding = ( ( 2 * ( width + ( 2 * moulding_1_width ) ) + 2 * ( height + ( 2 * moulding_1_width ) ) ) / 1000 ) * moulding_1_cost;
      $('#item_total').html( cost_of_moulding );

The problem is that the two variables moulding_1_cost and moulding_1_width are undefined outside of the getJSON call. How do I make these two variables available outside the getJSON call?

Nick Craver · Accepted Answer · 2010-11-30 14:46:29Z

The variables aren't set until that callback runs (when the server comes back with the JSON data), so you need to call whatever code uses them from that callback, like this:

$.getJSON('/calculate_quote/' + moulding_1_id, function(data) {
  var moulding_1_cost = data.moulding.cost;
  var moulding_1_width = data.moulding.width;
  var cost_of_moulding = ( ( 2 * ( width + ( 2 * moulding_1_width ) ) + 2 * ( height + ( 2 * moulding_1_width ) ) ) / 1000 ) * moulding_1_cost;
  $('#item_total').html( cost_of_moulding );
});

Or call another function like this:

$.getJSON('/calculate_quote/' + moulding_1_id, function(data) {
  someFunction(data.moulding.cost, data.moulding.width);
});
function someFunction(mqc, m1w) {
  var cost_of_moulding = ( ( 2 * ( width + ( 2 * m1w) ) + 2 * ( height + ( 2 * m1w) ) ) / 1000 ) * m1c;
  $('#item_total').html( cost_of_moulding );
}

In either case what remains true is you need to trigger whatever uses the data once you have the data, all asynchronous operations are like this.

Mike Ruhlin · Accepted Answer · 2010-11-30 14:47:12Z

0

You should be doing everything inside the getJSON call to ensure that it happens in the correct order.

answered Nov 30, 2010 at 14:47

Mike Ruhlin

3,5562 gold badges24 silver badges31 bronze badges

Comments

jAndy · Accepted Answer · 2010-11-30 14:56:03Z

0

Infact they are not undefined (after the code was executed). By skipping the var keyword those names go directly into the global scope (which in most instances.. is window). So you can access window.moulding_1_cost from anywhere of your script once this piece of script has executed.

And that most likely is your problem here, timing. Since this is the success handler of an ajax request this code runs asynchronously and therefore, is not executed instantly.

To solve this it's a good practice to use a callback function on your own. Nick Craver's answer has a pretty good demonstration on this.

edited Nov 30, 2010 at 14:56

answered Nov 30, 2010 at 14:48

jAndy

237k57 gold badges313 silver badges363 bronze badges

2 Comments

jAndy Over a year ago

..and I'm so curious who is downvoting this without a reason.

Nick Craver Over a year ago

Not my downvote, but they are in fact completely undefined unless something created and initialized them earlier, they're not defined at all until that callback runs at least once.

slobodan · Accepted Answer · 2010-11-30 14:46:34Z

-2

add

var moulding_1_cost;
var moulding_1_width;

outside of any javaScript function ;)

answered Nov 30, 2010 at 14:46

slobodan

2091 silver badge4 bronze badges

1 Comment

Stephen Over a year ago

This will cause a problem because the math after the $.getJSON will be executed before the callback.

Collectives™ on Stack Overflow

jQuery - Variable Scope Problem

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related