jquery function return doesn't work

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?

All together now: You can't return a value with an asynchronous function. — Blazemonger, May 09 '12 at 20:14
You have a syntax error `elseif(manual == true) // "else if" with a space` — elclanrs, May 09 '12 at 20:15

score 3 · Accepted Answer · answered May 09 '12 at 20:17

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
});

score 1 · Answer 2 · answered May 09 '12 at 20:14

1

Your closeconnectionsuccess variable is out of scope.

answered May 09 '12 at 20:14

Steve Davis

716
5
13

Consider adding a callback function so that you can perform actions after the request is complete. – Steve Davis May 09 '12 at 20:18

score 1 · Answer 3 · answered May 09 '12 at 20:16

1

The ajax call is asynchronous. So the function reaches the end before the ajax call returns.

You either have to pass in and call a callback function or trigger an event when the ajax call finishes.

answered May 09 '12 at 20:16

Andy

29,707
9
41
58

jquery function return doesn't work

3 Answers3