Jquery $.Deferred Not Passing Parameters

Question

I need to combine three methods:

1. An AJAX to check the existence of a code
2. If the code exists, confirm whether to overwrite
3. Overwrite

I've written three methods that return a $.Deferred in order to chain them together with .done(), which are below:

function checkFunction() {

    var code = $("#code").val();

    return $.ajax({
        url: "${pageContext.request.contextPath}/dataManagement/codeMaintenance/check",
        method: "POST",
        async: false,
        data: {
            "reasonCode": code
        },
        success: function(response, textStatus, jqXHR) {
            var exists = response.dataMap.exists;
            console.log("Code exists: " + exists);
            if (exists == true) {
                return $.Deferred().resolve(true);
            } else {
                return $.Deferred().reject();
            }


        }, error: function() {
            return $.Deferred().reject("AJAX ERROR");
        }
    });
};

var confirmFunction = function(codeExists) {

    console.log("Confirming overwrite");

    if (codeExists == true) {
        var confirm = confirm("Code Exists: Do you wish to overwrite?");
        if (confirm == true) {
            return $.Deferred(true);
        } else {
            return $.Deferred(false);
        }
    } else {
        return $.Deferred(true);
    }

};  

var saveFunction = function() {

    console.log("Saving");

    var code = $("#code").val();

    return $.ajax({
            url: "${pageContext.request.contextPath}/dataManagement/codeMaintenance/save",
            method: "POST",
            data: {
                "reasonCode": code
            },
            success: function(response, textStatus, jqXHR) {
                alert("test");
                return $.Deferred(true);
            }

        });
};

I then attempt to execute via this line:

checkFunction().done(confirmFunction(codeExists)).done(saveFunction());

Unfortunately, the parameter I set on the $.Deferred from the first method does not get passed as a parameter to confirmFunction().

What am I doing wrong?

Jason

Answer 1

In short: plenty.

1. You try to use return inside of asynchronous functions in the success handlers of your $.ajax() calls.

2. Here you pass the result of the function call and not a reference of the function as callbacks:
   checkFunction().done(confirmFunction(codeExists)).done(saveFunction());
   This should be more like this:
   checkFunction().done(confirmFunction).done(saveFunction);

3. In confirmFunction() you return a new Deferred object. What you should do is create a Deferred object, return the respective promise and then resolve/reject the Deferred object. So, e.g., your checkFunction() function should look like this:

 

function checkFunction() {

    var code = $("#code").val();

    // create deferred object
    var result = $.Deferred();

    return $.ajax({
        url: "${pageContext.request.contextPath}/dataManagement/codeMaintenance/check",
        method: "POST",
        async: false,
        data: {
            "reasonCode": code
        },
        success: function(response, textStatus, jqXHR) {
            var exists = response.dataMap.exists;
            console.log("Code exists: " + exists);
            if (exists == true) {
                result.resolve(true);
            } else {
                result.reject();
            }


        }, error: function() {
            result.reject("AJAX ERROR");
        }
    });

  return result.promise();
}