I am trying to validate a field off of two calls to the database. it goes to the database and validates if its true or false. I need to chain a few AJAX calls to do this. I am using .when, .then, and .done to do this, but it doesn't seem to be working.
var Validate = function () {
var isValid = true;
$errorList.find('li').remove();
$lblAError.text('');
$.when(ParcelValidate(isValid))
.then(AccountValidate(isValid))
.done(function () {
return isValid
});
};
var ParcelValidate = function (isValid) {
return $.ajax({
url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive",
method: "POST",
data: JSON.stringify({ "pin": $parcID.val() }),
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (data) {
if (!data.d) {
isValid = false;
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" }));
}
},
fail: function () {
isValid = false;
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
}
})
}
var AccountValidate = function (isValid) {
return $.ajax({
url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive",
method: "POST",
data: JSON.stringify({ "accountID": $parcID.val() }),
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (data) {
if (data.d) {
isValid = false;
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" }));
}
},
fail: function () {
isValid = false;
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
}
})
}
You have a couple of issues, the first one is that the is that the validate function is not returning anything, since you are making asynchronous call your function should return a promise and instead of returning a boolean it would be better to reject/resolve this promise, your code would look like this:
var Validate = function () {
$errorList.find('li').remove();
$lblAError.text('');
var promise = $.Deferred();
ParcelValidate(promise).then(AccountValidate(promise));
return promise;
};
var ParcelValidate = function (promise) {
return $.ajax({
url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive",
method: "POST",
data: JSON.stringify({ "pin": $parcID.val() }),
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (data) {
if (!data.d) {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" }));
promise.reject(false);
}
},
fail: function () {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
promise.reject(false);
}
})
}
var AccountValidate = function (promise) {
return $.ajax({
url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive",
method: "POST",
data: JSON.stringify({ "accountID": $parcID.val() }),
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (data) {
if (data.d) {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" }));
promise.reject(false);
}
promise.resolve(true);
},
fail: function () {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
promise.reject(false);
}
})
}
Now whatever is calling validate should wait for the promise and react accordingly to the done/fail methods ie:
Validate().done(function(){/*valid*/}).fail(function(){/*not valid*/})
One last thing as it is your code right now, since you are passing the isValid as a parameter, changing the value would not modify the isValid value of the original function.
The Problem I wanted to solve was that I wanted to reject a click event if I got true from one ajax call or false from another. The problem I was running into is that it would run all of them and go back to the event that started it and once I got the answer back from the server it would hit my returns but would not go back to the event. The event would already close with a value of true and run my other sections of code even if the answers I got back were false.
To fix this I added another button for them to click hid the asp control and had the new button run the validation. When I get a answer back from the ajax I validate what was returned and tell the JavaScript to click the asp control to fire the event. Not the most elegant or proper way but it works.
var Validate = function (Filter) {
$errorList.find('li').remove();
$lblAError.text('');
var promise = $.Deferred();
var hdnbtn = document.getElementById('btnInsert');
$.when(ParcelValidate()).then(function (data) {
if (data.d) {
$.when(AccountValidate()).then(function (data2) {
if (data2.d) {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" }));
} else {
hdnbtn.click();
}
})
}
else {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" }));
}
})
};
var ParcelValidate = function () {
return $.ajax({
url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive",
method: "POST",
data: JSON.stringify({ "pin": $parcID.val() }),
contentType: 'application/json; charset=utf-8',
datatype: 'json',
fail: function () {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
//promise.fail(false);
}
})
};
var AccountValidate = function () {
return $.ajax({
url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive",
method: "POST",
data: JSON.stringify({ "accountID": $parcID.val() }),
contentType: 'application/json; charset=utf-8',
datatype: 'json',
fail: function () {
$lblPError.text('!').css(({ "color": "red" }));
$errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
}
})
}