Question

Possible Duplicate:
jQuery: Return data after ajax call success

I have the following function that is called from another function. It needs to return something in order to see whether the function worked or not.

//Function to close any existing connection 
function closeConnection(manual) {
    //Establish connection to php script 
    $.ajax({
        type: 'POST',
        url: 'action/chat/closeconnection.php',
        success: function (feedback) {
            //If this function was called manually, also empty chatTextDiv and fade out chatDiv
            if (manual == true) {
                //Stop getting messages
                clearInterval(setintervalid);
                //Fade out chatDiv
                $('#chatDiv').fadeOut(100);
                //Empty chatTextDiv
                $('#chatTextDiv').html('');
                //Fade in openChatDiv
                $('#openChatDiv').fadeIn(100);
            }
        }
    }).error(function () {
        //Append with connection error - user doesn't know that he is disconnected first so it is better to say this as the function will return false and stop other functions
        if (manual != true) {
            $('#chatTextDiv').append('You could not be connected. Please try again later.<hr/>');
            //Stop getting messages
            clearInterval(setintervalid);
            var closeconnectionsuccess = false;
        }
        elseif(manual == true) {
            $('#chatTextDiv').append('You could not be disconnected. Please try again later.<hr/>');
            var closeconnectionsuccess = true;
        }
    });

    return closeconnectionsuccess;
}

It is really only about the last line where I want to return the success of the function: The code doesn’t work then. Why not?

Answer 1

As @Rockitsauce said, your closeconnectionsuccess variable is not in the scope of the function and therefore not accessible at that point. More importantly, however, you have to take into account that you are using an asynchronous function of jQuery – the function closeConnection will complete execution before the callbacks (success, error) are called. You’ll have to add a callback function to your own function as well and thereby make it asynchronous, too, if you want to retrieve any result after the HTTP request has completed.

This code should therefore work:

//Function to close any existing connection 
function closeConnection(manual, callback) {
//Establish connection to php script 
$.ajax({
    type: 'POST',
    url: 'action/chat/closeconnection.php',
    success: function(feedback) {
        //If this function was called manually, also empty chatTextDiv and fade out chatDiv
        if(manual==true)
        {
            //Stop getting messages
            clearInterval(setintervalid);
            //Fade out chatDiv
            $('#chatDiv').fadeOut(100);
            //Empty chatTextDiv
            $('#chatTextDiv').html('');
            //Fade in openChatDiv
            $('#openChatDiv').fadeIn(100);
        }
    }
}).error(function() {
    //Append with connection error - user doesn't know that he is disconnected first so it is better to say this as the function will return false and stop other functions
    if(manual!=true)
    {
        $('#chatTextDiv').append('You could not be connected. Please try again later.<hr/>');
        //Stop getting messages
        clearInterval(setintervalid);
        callback(false);
    }
    elseif(manual==true)
    {
        $('#chatTextDiv').append('You could not be disconnected. Please try again later.<hr/>');
        callback(true);
    }
});
}

closeConnection(manual, function(success) {
    //Process result
});