Return promise to use with ajax object

Question

I have a function that I pass a form element into in order to handle form submits using AJAX.

I want to return the ajax object that will be handling the form submit from my function so that I can attach additional done callbacks -- the problem is I don't know how to return the ajax object without creating it(and executing it) first.

How can I substitute a promise in lieu of the actual ajax object so that I return something to attach extra callbacks to?

HandleModalFormSubmit: function (element) {
    var form,
    modalcontainer = $(element).closest('.modal'),
        modal = $(element).closest('.modal-dialog'),
        ajaxdata;


    if (element.is('form')) form = $(element);
    else {
        form = element.find('form');
    }

    $.validator.unobtrusive.parse(form);

    $(element).on('submit', function (event) {
        event.preventDefault();
        ajaxdata = $.ajax({
            type: form.method,
            url: form.action,
            data: $(form).serialize()
        }).done(function (data) {
            if (data.status == null) {
                modal.html(data);
            } else {
                modalcontainer.modal('hide');
            };
        }).always(function (data) {
            modal.spin(false);
            modal.fadeTo(500, 1);
        });
        modal.fadeTo(300, 0);
        modal.spin();
    });
    var returningobject = {
        element: form,
        ajax: ajaxdata
    };
    return returningobject;
}
}

EDIT: Here is what I'd like to have happen with the function

 var formobject = $Global.HandleAjaxForm(element);
                formobject.ajax.done(function(data1) {
                    if (data1.status == 'ok')
                        window.location.href = (data.redirectToUrl == null) ? "~/Dashboard" : data.redirectToUrl;
                });

Answer 1

Is it feasible to attach a callback to the function and have that call back fire within the ajax done callback? Or do you actually need the ajax object itself other than to attach a done() listener to it

HandleModalFormSubmit: function (element, callBack) {
    var form,
    modalcontainer = $(element).closest('.modal'),
        modal = $(element).closest('.modal-dialog'),
        ajaxdata;


    if (element.is('form')) form = $(element);
    else {
        form = element.find('form');
    }

    $.validator.unobtrusive.parse(form);

    $(element).on('submit', function (event) {
        event.preventDefault();
        ajaxdata = $.ajax({
            type: form.method,
            url: form.action,
            data: $(form).serialize()
        }).done(function (data) {
            if (data.status == null) {
                modal.html(data);
            } else {
                modalcontainer.modal('hide');
            };

          //call the callback within the done function of the ajax object here
          if(callBack && typeof callBack == "function") callBack.call(context, params);
        }).always(function (data) {
            modal.spin(false);
            modal.fadeTo(500, 1);
        });
        modal.fadeTo(300, 0);
        modal.spin();
    });
    var returningobject = {
        element: form,
        ajax: ajaxdata
    };
    return returningobject;
}
}

Obviously this doesn't give you the ajax object itself back but you can plugin the callback and kick out whatever parameters you need.

Edit: You could also return the jquery ajax function itself something like this :

HandleFormSubmit : function(){
   return $.ajax({});
}

then you could attach your done method like so :

HandleFormSubmit().done(function(){
});

Answer 2

Try to create your own deferred

HandleModalFormSubmit: function (element) {
    var form,
    modalcontainer = $(element).closest('.modal'),
        modal = $(element).closest('.modal-dialog'),
        ajaxdata, $deferred = jQuery.Deferred();


    if (element.is('form')) form = $(element);
    else {
        form = element.find('form');
    }

    $.validator.unobtrusive.parse(form);

    $(element).on('submit', function (event) {
        event.preventDefault();
        ajaxdata = $.ajax({
            type: form.method,
            url: form.action,
            data: $(form).serialize()
        }).done(function (data) {
            if (data.status == null) {
                modal.html(data);
            } else {
                modalcontainer.modal('hide');
            }
            $deferred.done.apply(this, arguments);
        }).always(function (data) {
            modal.spin(false);
            modal.fadeTo(500, 1);
            $deferred.always.apply(this, arguments);
        }).fail(function () {
            $deferred.fail.apply(this, arguments);
        });
        modal.fadeTo(300, 0);
        modal.spin();
    });
    var returningobject = {
        element: form,
        ajax: ajaxdata
    };
    return $deferred.promise();
}