Question

I’m having an issue that’s killing me. Here’s my code:

$('.somediv.btn-2').live('click', function() {
    if (addToCart()) {
        var container = $(this).parent();
        container.hide();
        container.next().show();
    }
});

function addToCart() {
    // ...
    return true
}

For some reason the container never gets hidden.

Although if I just hide it without the if() it works. The function makes an AJAX call and returns true on success. When I look at the calls they do return a success so it should return true.

Thanks so much.

EDIT:
I tried looking on the console with console.log(addToCart()) and it shows undefined

Answer 1

Since your addToCart() function is asynchronous you need to use a callback instead of a return value. Your code should look something like this:

$('.somediv.btn-2').live('click', function() {
    addToCart(function() {
        var container = $(this).parent();
        container.hide();
        container.next().show();
    });
});

function addToCart(successCallback) {
    // instead of return true you'd have
    successCallback();
}