I have the following code:
function getChainDeals(chainID) {
$('#loadingDiv1').show();
var apiCode = * my unique api code * ;
var imageURL;
//Get relevant Image
$.ajax({
url: 'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
dataType: 'jsonp',
success: function (data) {
$.each(data, function (key, value) {
alert('key = ' + key);
alert('chainid = ' + chainID);
if (key === chainID - 1) {
alert('here');
imageURL = value.logoBig;
alert('imageURL = ' + imageURL);
return false;
}
});
// hide the loading animation
$('#loadingDiv1').hide();
},
statusCode: {
404: function () {
alert: ('There was a problem with the server');
}
}
});
alert(imageURL);
alert(chainID);
}
For some reason however, the AJAX
call is being skipped and only the final two alerts
are being processed. I actually used almost identical code earlier in the program which worked fine...
Can anyone see what is going wrong here?
Thank you for your help.
You should put the alert
s inside of the ajax callback because ajax is async:
function getChainDeals(chainID) {
$('#loadingDiv1').show();
var apiCode = * my unique api code * ;
var imageURL;
//Get relevant Image
$.ajax({
url: 'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
dataType: 'jsonp',
success: function (data) {
$.each(data, function (key, value) {
alert('key = ' + key);
alert('chainid = ' + chainID);
if (key === chainID - 1) {
alert('here');
imageURL = value.logoBig;
alert('imageURL = ' + imageURL);
return false;
}
});
// hide the loading animation
$('#loadingDiv1').hide();
alert(imageURL);
alert(chainID);
},
statusCode: {
404: function () {
alert: ('There was a problem with the server');
}
}
});
}