JQUERY AJAX WITH CALLBACK

Question

I have an AJAX function that is called from a javascript function. Something like this:

(CODE1)
//javascript function calling AJAX.
var function check(){
  var status = chkHoliday(date,'Date Chosen');
  alert('called');
  return status;
}

//AJAX function
function chkHoliday(date,str){
    var flag = true;
    $.ajax({ 
        type: "GET",
        url: someurl,
        async: false,          //if commented, the alert() from the caller function is called before completion of this function.
        dataType: "json",
        success: {
            flag = false;
        }
    });
    return flag;
}

It works well. The only problem is that since async it is set to false, the web page sort of hangs for a while but then continues to proceed further.

To avoid this I read something about callback functions so i tried this out: (CODE 2)

//javascript function calling AJAX.
var function check(){
    var status;
    chkHoliday(date,'Date Chosen',function(retVal){
        status = retVal;
    });
    if(status != null){
       alert(status);
       return status;
    }
    else{
       alert(true);
       return true;
    }
}

//AJAX function
function chkHoliday(date,str,callback){
    var flag = true;
    $.ajax({ 
        type: "GET",
        url: someurl,
        //async: false,          //if commented, the alert() from the caller function is called before completion of this function.
        dataType: "json",
        success: {
            flag = false;
            callback(flag);
        }
    });
    //return flag;
}

this worked but the alert was called again before the AJAX function could complete stating "undefined". I don't know what I'm doing wrong.

I want, that the AJAX function should wait till it executes completely and then return to the calling function and run the next statements in the caller function with halting the process (i.e with the use of async). Also i want that the value returned by AJAX should be easily accessible to my caller function.

Long answer: [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call), short answer: put the alerts in the callback as well. — JJJ, Sep 30 '13 at 16:10
Try using Jquery's blockUI plugin. http://www.malsup.com/jquery/block/ — nasaa, Sep 30 '13 at 16:13
Actually i want to return the value of the status to a calling function. To simplify i used alerts in this case! — D_ROCKS, Sep 30 '13 at 16:13
Doesn't change the answer. Everything you want to happen after the AJAX response goes into the callback. — JJJ, Sep 30 '13 at 16:15
@Juhana i'll try it out and see!!!! I'm confused what if it returns the control back to the ajax function?? — D_ROCKS, Sep 30 '13 at 16:17

score 0 · Answer 1 · answered Oct 01 '13 at 04:03

Put the alert inside the callback function:

chkHoliday(date,'Date Chosen',function(retVal){
        status = retVal;
       if(status != null){
           alert(status);
       }
    else{
       alert(true);
    }
});

But note you cannot use the return statement anymore as what you have expected because it is asynchronous.

Daniel · Answer 2 · 2013-10-01T04:14:00.153

Since AJAX works asynchronous, it is a problem to place it in a function and return a value. To solve this use deferred with a promise. This will promise the ajax result to the caller. It is slightly different. Here is an example. Works like a charm for me. Of course you will need to adapt it to your needs, but all you really have to do is create your data object.

var data = {}

function chkHoliday(data) {
    var deferred = $.ajax({
        method: "post",
        url: ajaxURL,
        dataType: "json",
        data: data
    });
    return deferred.promise();
}

chkHoliday(data).done(function (response) {
    console.log(response);
}

return from your php file with a

echo json_encode(array("success"=>"hello"));

score 0 · Answer 3 · answered Oct 01 '13 at 04:17

0

Put the alert inside the callback functions. or else alerts will work simultaneously inspite of success or error.

answered Oct 01 '13 at 04:17

sms

426
1
8
23

JQUERY AJAX WITH CALLBACK

3 Answers3