CODEWITHSUNDEEP
javascriptjqueryvariablesscope
freshest
freshest

Reputation: 6241

jQuery - Variable Scope Problem

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?

Upvotes: 1

Views: 724

Answers (4)

jAndy
jAndy

Reputation: 236202

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.

Upvotes: 0

Mike Ruhlin
Mike Ruhlin

Reputation: 3556

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

Upvotes: 0

slobodan
slobodan

Reputation: 209

add

var moulding_1_cost;
var moulding_1_width;

outside of any javaScript function ;)

Upvotes: -2

Nick Craver
Nick Craver

Reputation: 630637

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.

Upvotes: 7

Related Questions