Jquery deffered object resolve after ajax requests done

Question

I have a code which is ran after form submit. it is AJAX requests based. Problem I have is in FormSubmit function at Validation.done(function(){ i get error message saying Uncaught TypeError: Validation.done is not a function. But if you look FormValidate function it returns deferredObject.promise which is resolved or rejected in ajax done or fail.

So where is the problem??

When user submits form we run action:

$(document).ready(function() {
    $("#NewOrder").submit(function (e){
        e.preventDefault();
        FormSubmit("NewOrder");
        return false;
    });
});

function FormSubmit(FormId)
{
    var Validation = FormValidate(FormId);
    Validation.done(function(){
       //Do stuff if validation succeeded
    });
}

FormValidate function:

function FormValidate(FormId)
{
    var deferredObject = $.Deferred();

    var url = "../../ajax/FormValidate";
    var data = {};

    var promise = AjaxRequest(url, data);

    promise.done(function(response) {
        var resultArray = JSON.parse(response);
        var FormEntity = $('#'+FormId).attr('entity');

        if($.isEmptyObject(resultArray)){
            deferredObject.resolve();
        }
        else{
            $.each(resultArray, function( key, value ) {                
                $( "div#"+key+"_validation" ).text(value);              
            });         
            deferredObject.reject();
        }
    });

    promise.fail(function(response) {
        deferredObject.reject();
        console.log(response);      
    });

    return deferredObject.promise;
}

AjaxRequest function:

function AjaxRequest(url, data)
{
    var deferredObject = $.Deferred();

    var request = $.ajax({
        url: url,
        type: "POST",
        data: data,
    });

    request.done(function (response){
        deferredObject.resolve(response);
    });

    request.fail(function (response){
        deferredObject.reject(response);
    });

    return deferredObject.promise();
}

`return deferredObject.promise;` should be `return deferredObject.promise();` — A. Wolff, May 17 '15 at 11:12
Don't use the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572)! — Bergi, May 17 '15 at 11:17
@Bergi where and how would you improve this code? Because I really don't understand as this is a new thing for me..... — Eimantas Baigys, May 17 '15 at 11:44

score 2 · Accepted Answer · edited May 17 '15 at 11:16

2

deferredObject.promise is a function. You need to call it to obtain the promise.

return deferredObject.promise();

edited May 17 '15 at 11:16

Bergi

630,263
148
957
1,375

answered May 17 '15 at 11:13

Matti Virkkunen

63,558
9
127
159

Seems you already knew that since you are calling it in your other function. Typo? – Matti Virkkunen May 17 '15 at 11:14

score 0 · Answer 2 · edited May 23 '17 at 12:14

You are heavily using the deferred antipattern. Instead of explicitly constructing a deferred and using .done and .fail handlers on the given promise to resolve/reject, just use the .then method:

function FormValidate(FormId) {
    var url = "../../ajax/FormValidate";
    var data = {};

    return AjaxRequest(url, data).then(function(response) {
        var resultArray = JSON.parse(response);
        var FormEntity = $('#'+FormId).attr('entity');

        if ($.isEmptyObject(resultArray)) return; // resolve with undefined
        $.each(resultArray, function(key, value) {
            $("div#"+key+"_validation").text(value);
        });
        return $.Deferred().reject(resultArray); // if not empty
    }, console.log.bind(console));
}

function AjaxRequest(url, data) {
    return $.ajax({
        url: url,
        type: "POST",
        data: data,
    });
}

Then your typo with those .promise() calls wouldn't have happened either :-)

Jquery deffered object resolve after ajax requests done

2 Answers2