Friday, January 13, 2012

Asynchronous AJAX CALL Issue

I was working with some jQuery server side validation I got an issue of asynchronous AJAX call.
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){
 
         //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. */
    }
});
 
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.

No comments:

Post a Comment

Followers