Do something after ajax call is complete

Question

I am using the Edmunds API SDK to retrieve vehicle information for one of my projects and I have a function that displays the results once it has the vehicle image. So displaying the result happens after the ajax call to get the image. I have the ajax call setup like so:

self.getCarPic = function() {    
            // Optional parameters
            var options = { "styleId" : $options.val() };

            // Callback function to be called when the API response is returned
            function success(res) {

                for(var i in res){
                    // Looking for the front view shot of the car
                    if (res[i].shotTypeAbbreviation === "FQ") {
                        url = "http://media.ed.edmunds-media.com" + res[i].photoSrcs[res[i].photoSrcs.length-1];
                        break;
                    }
                    // If its not available, get whatever they have on the api
                    else {
                       url = "http://media.ed.edmunds-media.com" + res[0].photoSrcs[res[i].photoSrcs.length-1];
                    }
                }
                // If there is no image at all just return the default car pic
                if (! url) {
                       url = defaultPic;
                }
            }
            // If an error occurs just set the url to default car pic
            function fail(data) {
                 url = defaultPic;
            }

            // Fire the API call
            res.api('/v1/api/vehiclephoto/service/findphotosbystyleid', options, success, fail);
        };

And I have the other function setup to display result like so:

    self.getResult = function() {
                var x = self.getCarPic;

                $.when(x).done(function(){
                   // display result code 
                }
    };

This doesnt seem to work because the display function gets executed before the ajax call completes. I know that the getCarPic should be a promise object but how would do I do that when I am using the Edmunds SDK ? I can't use global functions like ajaxComplete because I don't want it to interfere with other ajax calls I have.

Answer 1

Try

$.ajax({url: '/'}).done(function(data) {});