Question

I am trying to write simple function that checks to see if a designer name exists in the database. I am using jQuery’s ajax function to try to do this:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    var designer_exists =  false;
    var temp = $.ajax( { type: "GET", 
             url: "/api/check_brand_exists/", 
             data : {name : designer_name }, 
             success: function(data) {
                    designer_exists = $.parseJSON(data);
                    return designer_exists;
                }}).statusText;
    return designer_exists;
}

I have read about javascript scoping, and but still can’t seem to find my bug, which is checkDesignerName always returns false. Do I need to use a closure for this function to work correctly?

Thanks

Answer 1

It’s the nature of AJAX which is asynchronous that you seem to have troubles with understanding.

At this stage:

return designer_exists;

your AJAX call hasn’t yet finished. It’s only inside the success callback, which happens much later, that you can use the results. You cannot have a function which returns some result and this result depends on an AJAX call. You can only exploit the results of an AJAX call iniside the success callback:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    $.ajax({ 
        type: "GET", 
        url: "/api/check_brand_exists/", 
        data : { name : designer_name }, 
        success: function(data) {
            var designer_exists = $.parseJSON(data);
            // Here and only here you know whether this designer exists
            alert(designer_exists);
        }
    });
}

You could of course perform a synchronous call to the server which is something totally not recommended as it will freeze the client browser and piss the user off your site during the AJAX request by setting the async: false flag:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    var designer_exists = false;
    $.ajax({ 
        type: "GET", 
        url: "/api/check_brand_exists/", 
        async: false,
        data : { name : designer_name }, 
        success: function(data) {
            designer_exists = $.parseJSON(data);
        }
    });
    return designer_exists;
}

I am mentioning this just for completeness of the answer, not as something that you should ever be doing.

Now because it seems that you are doing some kind of validation logic here, here’s what I would recommend you as an ultimate solution: the jquery.validate plugin. It has this great remote rule support that will do exactly what you need here.