Reputation: 6241
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
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
Reputation: 3556
You should be doing everything inside the getJSON call to ensure that it happens in the correct order.
Upvotes: 0
Reputation: 209
add
var moulding_1_cost;
var moulding_1_width;
outside of any javaScript function ;)
Upvotes: -2
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