manipulating local variable with a callback in JS

Question

here's my code with jquery:

function check_hotel_exists(value, col)
{
        var url = base_url + 'ajax/checkuniquehotel';

        var response = false;

        $.get(url, {hotelname:value}, function(data){
            if (data === 'true') response = true;
        });

        alert((response) ? 'Hotel is Not Existing' : 'Hotel Exists');

        return [response, "That hotel already exists"];
}

the value of response does not change.

How do I change the value of response with a callback from the get function? I am expecting the variable data from a server response which is either 'true' or 'false'.

Any help would be appreciated.:)

Answer 1

The value does not change because the ajax callback that is supposed to set response to true executes asynchronously after the check_hotel_exists function exited. A possible workaround would be to execute the ajax request synchronously by setting the async option to false.

$.ajax({
    url: base_url + 'ajax/checkuniquehotel',
    async: false,
    data: { hotelname: value },
    success: function(result) {
        if (result === 'true') response = true;
    }
});

Another workaround is to perform the call asynchronously but in this case all the work has to be done in the success callback, your function no longer need to return a value (for example show an error message if the hotel name already exists in the success callback). IMHO this is a better approach.

Answer 2

All ajax requests are asynchronous, so you can't create a function that returns something based on the result of an ajax call. You should handle the response asynchronously (for example: change a piece of text on the page after the ajax call completed):

function check_hotel_exists(value, col)
{
    var url = base_url + 'ajax/checkuniquehotel';

    $.get(url, {hotelname:value}, function(data){
        var msg = (data === 'true') ? 'Hotel is Not Existing' : 'Hotel Exists';

        $("#resultmsg").text(response);
    });
}

Answer 3

Try this

function check_hotel_exists(value, col)
{
        var url = base_url + 'ajax/checkuniquehotel';

        var response = false;

        $.get(url, {hotelname:value}, function(data){
            if (data === 'true') response = true;
           alert((response) ? 'Hotel is Not Existing' : 'Hotel Exists');
           //this wont work, so do something else!!!!
           //return [response, "That hotel already exists"];
        });
}

Answer 4

Dirty approach, but it works:

Have your variable defined outside callback function:

var response = false;

function check_hotel_exists(value, col)
{
        var url = base_url + 'ajax/checkuniquehotel';

        response = false;

        $.get(url, {hotelname:value}, function(data){
            if (data === 'true') response = true;
        });

        alert((response) ? 'Hotel is Not Existing' : 'Hotel Exists');

        return [response, "That hotel already exists"];
}

Answer 5

A solution would be to make your check_hotel_exists function asynchronous in its turn, i.e. receiving a function as a callback parameter:

function check_hotel_exists(value, col, callback)
{
        var url = base_url + 'ajax/checkuniquehotel';

        var response = false;

        $.get(url, {hotelname:value}, function(data){
            if (data === 'true') response = true;
            if (callback) {callback.call(response);}
        });
}

This way you can call it wherever you want to check the presence of a hotel like this:

check_hotel_exists(value, col, function(response){
  alert(response);
});