I was working with some jQuery server side validation I got an issue of asynchronous AJAX call.
Let me describe with the following code:
Let me describe with the following code:
//Validate Media path from server
$('input[name$="btnSubmit"]').click(function(){
var stCurrentMediaPath = $('#dspForm_vcMedia_File_Path').val();
var isValidPath = false;
if(stCurrentMediaPath.length){
$('input[name$="btnSubmit"]').click(function(){
var stCurrentMediaPath = $('#dspForm_vcMedia_File_Path').val();
var isValidPath = false;
if(stCurrentMediaPath.length){
//AJAX call to validate the Media path before form submission
$.ajax({
type: "GET",
url: "index.cfm?inc=AddTaskAJAXListener&ajax=true",
data: "method=validatePhysicalPath&vcPhysicalPath=" + escape(stCurrentMediaPath),
statusCode: { 404: function() {
alert('page not found');}
},
success:function(response){
response = jQuery.trim(response).toLowerCase();
if(response.toLowerCase() == 'yes'){
isValidPath = true;
} else {
alert('Provided Media Path does not exist in system.');
isValidPath = false;
}
}
});
/*If the isValidPath is false then do the necessary action if true then submit the form. */
}
});
$.ajax({
type: "GET",
url: "index.cfm?inc=AddTaskAJAXListener&ajax=true",
data: "method=validatePhysicalPath&vcPhysicalPath=" + escape(stCurrentMediaPath),
statusCode: { 404: function() {
alert('page not found');}
},
success:function(response){
response = jQuery.trim(response).toLowerCase();
if(response.toLowerCase() == 'yes'){
isValidPath = true;
} else {
alert('Provided Media Path does not exist in system.');
isValidPath = false;
}
}
});
/*If the isValidPath is false then do the necessary action if true then submit the form. */
}
});
But I got an issue: isValid is
always false it takes the initial value which I have assigned at the
time of declaring that variable. This is happening because our AJAX call
is asynchronous call. The flow of execution of the block of code does
not wait for the AJAX call to return. The flow initiates the AJAX call
but does not wait for the result. So each time we will get isValid = false.
So, our next step is how we can make the code flow linear execution(wait for AJAX call to finish). We can do that by making a synchronous AJAX call.
Please follow the block of code which will make the synchronous AJAX call:
//Validate Media path from server
$('input[name$="btnSubmit"]').click(function(){
var stCurrentMediaPath = $('#dspForm_vcMedia_File_Path').val();
var isValidPath = false;
//Sync AJAX call to validate the Media path before form submission
if(stcurrentMediaPath.length){
$.ajax({
async: false,//This part will make the synchronous AJAX call
type: "GET",
url: "index.cfm?inc=AddTaskAJAXListener&ajax=true",
data: "method=validatePhysicalPath&vcPhysicalPath=" + escape(stCurrentMediaPath),
statusCode: { 404: function() {
alert('page not found');}
},
success:function(response){
response = jQuery.trim(response).toLowerCase();
if(response.toLowerCase() == 'yes'){
isValidPath = true;
} else {
alert('Provided Media Path does not exist in system.');
isValidPath = false;
}
}
});
/*If the isValidPath is false then do the necessary action if true then submit the form. */
}
});
Hope this will help you.
type: "GET",
url: "index.cfm?inc=AddTaskAJAXListener&ajax=true",
data: "method=validatePhysicalPath&vcPhysicalPath=" + escape(stCurrentMediaPath),
statusCode: { 404: function() {
alert('page not found');}
},
success:function(response){
response = jQuery.trim(response).toLowerCase();
if(response.toLowerCase() == 'yes'){
isValidPath = true;
} else {
alert('Provided Media Path does not exist in system.');
isValidPath = false;
}
}
});
/*If the isValidPath is false then do the necessary action if true then submit the form. */
}
});
Hope this will help you.
No comments:
Post a Comment