Search jQuery

jQuery Forum

Sequential Ajax calls

in Using jQuery • 8 years ago

I've got a validation that requires an ajax call, the validation is done both on the field change event and on the form submit so I've got a named function that does the validation and just call that function from both places.

The problem I've got though is that when the form is submitted there is another validation that needs to happen via ajax, this one may or may not be required based on a form value.

The validation process I'd like to follow when the form is submitted is

make sure all the required fields have an entry

if all the fields are OK do the mandatory ajax call

if the mandatory call returns an OK, then do the optional one, if required

I cant put the optional ajax in the callback of the required one since the required one is called at other times other than when the form is submitted and I'd prefer not to duplicate the required ajax code.

Here's the code I have so far:

$(document).ready(function(){
$("#nextBtn").click(function() {
isValid();
});
$("#poNumber").change(function() {
if ($("#poNumber").val() != "") {
var temp = validatePO();
}
});
});
function isValid(){
var isValid = true;
var emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$(".isReq").removeClass("inpNeeded");
...
if ($("#contactName").val() == "") {
isValid = false;
$("#contactName").addClass("inpNeeded");
}
if ($("#phone").val() == "") {
isValid = false;
$("#phone").addClass("inpNeeded");
}
...
if (isValid) {
isValid = validatePO(); // this one needs to get called
// this is the optional one
if ($("#frfqNumber").val() != "") {
$.post("include/verifyFRFQNumber.asp",
{rfqID: $("#frfqNumber").val()},
function(data){
if (data.frfqStatus == "1") {
alert("The FRFQ number you entered does not exist.\nPlease double check the number.");
isValid = false;
}
if (isValid) {
$("#poForm").submit();
} else {
alert("Please make sure the highlighted fields have an entry.");
}
},
"json"
);
} else if (isValid) {
$("#poForm").submit();
}
} // end if isValid
}
function validatePO() {
$.get(
"include/validatePONumber.asp",
{poNumber: $("#poNumber").val()},
function(data) {
if (data.isUsed == "yes") {
alert("There is an existing purchase order on file with that PO Number.\nPlease enter a new number for this order.");
$("#poNumber").addClass("inpNeeded");
} else {
$("#poNumber").removeClass("inpNeeded");
}
}
);
}

I'm not sure if when() is the answer since the second call may or may not be needed.

I can make it work, but it would require duplicating the required ajax and then nesting the optional one in the call back, or I could make them all async false, but neither of those solutions seems quite right.

Other options? Thoughts?

Thanks everyone,

Dave

Replies(4)

watusiware

Re: Sequential Ajax calls

8 years ago

I cant put the optional ajax in the callback of the required one since the required one is called at other times other than when the form is submitted and I'd prefer not to duplicate the required ajax code

I usually solve this type of issue with an optional boolean parameter that is set to true for the least common case.. It's nice that Javascript can have optional parameters - leave the parameter out of the calling parameters, and you get an undefined. So, just test the optional parameter for true.

function isValid(needsExtraValidation) {...

isValid() // No second validation

isValid(true) // second validation, if meets additional criteria

Or, optionally:

function isReallyQuiteValid() {

isValid(true);

}

dsvick

Re: Sequential Ajax calls

8 years ago

Thanks, I hadn't even thought of that and I've used it before too. I think I was trying to over think it.

Dave

dsvick

Re: Sequential Ajax calls

8 years ago

Thanks Watusiware

Upon further thought and finally getting around to playing with it again today, that wont work, the problem I still had was that I had two ajax calls to make but one of them would be called at other times as well and I didn't want to nest them and duplicate the code.

What I ended up doing was, creating both ajax functions like this:

function validatePO() {
return $.get(
"include/validatePONumber.asp",
{poNumber: $("#poNumber").val()},
function(data) {
if (data.isUsed == "yes") {
alert("The world will now end.");
$("#poNumber").addClass("inpNeeded").focus();
} else {
$("#poNumber").removeClass("inpNeeded");
}
}
);
}

That way each returned the promise which let me just use when to make sure both completed when I had to call them both.

$.when(rfqTest(), validatePO()).done(function(rfqData, poData) {
if (rfqData.frfqStatus == 0 && poData.isUsed == "no") {
$("#poForm").submit();
}
});

And when I only needed to call the one I just ignored the returned promise since it didn't matter when it completed.

Now, having said that, if there's a better way to have done this by all means let me know.

Dave

watusiware

Re: Sequential Ajax calls

8 years ago

And when I only needed to call the one I just ignored the returned promise since it didn't matter when it completed.

Alternative would be to resolve the one you are ignoring at the time that you make the call. If you are resolving with a value, resolve with null or undefined and make sure you test for that. (Don't try to use the result, as there is none!)

Top Reply

Response title

Attachments

jQuery Forum

Sequential Ajax calls

Replies(4)

Re: Sequential Ajax calls

Re: Sequential Ajax calls

Re: Sequential Ajax calls

Re: Sequential Ajax calls

Statistics

Tags

Actions

Related Posts