0

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;
                });
4

2 回答 2

1

将回调附加到函数并在 ajax done 回调中触发回调是否可行？或者您是否真的需要 ajax 对象本身而不是附加一个 done() 侦听器

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;
}
}

显然这不会给你 ajax 对象本身，但你可以插入回调并踢出你需要的任何参数。

编辑：您还可以返回 jquery ajax 函数本身，如下所示：

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

然后你可以像这样附加你的完成方法：

HandleFormSubmit().done(function(){
});
于 2013-10-07T16:20:48.897 回答
0

尝试创建自己的延迟

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();
}
于 2013-10-07T16:17:49.123 回答