Как создать функцию для предоставления события до / после отправки в JavaScript на основе jQuery?

Question

Во-первых, мне нравится концепция jQuery о обработчике событий. Пожалуйста, посмотрите на следующий код.

$('#someid').submit(function()
{
    // some logic for checking input data before submit
    return isValid($(this));
});

Но у меня возникает проблема, когда я пытаюсь создать индикатор для отображения процесса отправки. Потому что jQuery не имеет никакой функции, как до / после события xxx. Таким образом, невозможно создать какой-либо процесс, подобный следующей диаграмме.

Блок-схема http://qmv6sa.bay.livefilestore.com/y1pybXwRr2DP061WcFlJCQppOJnwmSvT_CBcON53vyKJ-bvmQAMd6npqOm9VjorNRoqY2eUYt9mVCtEL_HArowjUtWRVEnwFu4J/flow.PNG

Хотя можно создать вышеприведенную диаграмму, но в реальном приложении 3 функции в разных событиях не знают друг друга. Таким образом, невозможно создать какую-либо функцию, подобную следующему коду.

function form_submit()
{
    if(isValid($(this)))
    {
        // send form data via AJAX/POST
        submitForm($(this));

        // display animation
        displayAnimation();
    }
    else
    {
        displayError();
    }
}

У вас есть идеи для решения этого вопроса?

Обновление # 1

Мне нравится что-то вроде следующего кода.

// Before Submit function will receive function as parameter. If some function return false this submit will not be submitted.
$('#form1').beforeSubmit(function()
{
    return isValid($(this));
});

// So, I can create custom submit function for posting data via AJAX or any protocal.
$('#form1').submit(function()
{
    var serializedData = serializeForm($(this));
    $.postForm($(this), serializedData);

    $(this).afterSubmit();
    return false;
}

// After that, I can display animation for showing form process.
$('#form1').afterSubmit(function()
{
    displayAnimation($(this));
}

Answer 1

Лучше всего не делать это как «обычную» отправку, а использовать метод представления Ajax. Есть несколько из них. Проверьте Форма отправки ajaxSubmit () .

Предполагая, что вы делаете еще один вызов Ajax для какой-либо проверки формы (или, скажем, для получения дополнительной информации с другого сайта), вы можете выполнить этот процесс:

1. Пользователь нажимает кнопку "отправить";
2. Отключить кнопку отправки;
3. Выполните Ajax-вызов для проверки, получения дополнительной информации или чего-либо еще;
4. В обратном вызове для завершения этого вызова Ajax, вызовите ajax submit;
5. Когда эта отправка возвращает, отправьте пользователя на новую страницу или сделайте что угодно.

Answer 2

Я решил это с помощью панелей. Но я бы хотел решить эту проблему и с помощью ajax.

Answer 3

Я просто решаю свой вопрос с помощью оболочки событий, используя следующий код. Это довольно длинный код. Но это хорошо работает на моем базовом тестировании. Я могу назначить событие «подготовить к отправке» для расширителя водяного знака, перед отправкой события для валидатора управления, отправить событие для отправки данных формы через AJAX и после события «отправить» для индикатора отправки формы.

/* jQuery - Form Submit Event Extender */
var _prepareSubmitFunction = new Object();
var _beforeSubmitFunction = new Object();
var _submitFunction = new Object();
var _afterSubmitFunction = new Object();
jQuery.fn._oldSubmit = jQuery.fn.submit;

function formSubmitEventExtender_Init(form)
{
    form = $(form);

    form.unbind('submit.formSubmitEventExtender');
    form.bind('submit.formSubmitEventExtender', null, function ()
    {
        form.prepareSubmit();

        if (form.beforeSubmit())
        {
            var result = true;

            for (var i in _submitFunction[form.attr('id')])
            {
                var temp = _submitFunction[form.attr('id')][i]();
                temp = ((temp === false) ? false : true);

                result = result && temp;
            }

            form.afterSubmit();

            return result;
        }
        else
        {
            return false;
        }
    });
}

jQuery.fn.prepareSubmit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_prepareSubmitFunction[id])
        {
            _prepareSubmitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _prepareSubmitFunction[id]) < 0)
            _prepareSubmitFunction[id].push(fn);
    }
    else
    {
        for (var i in _prepareSubmitFunction[id])
        {
            _prepareSubmitFunction[id][i]();
        }
    }

    return x;
};
jQuery.fn.beforeSubmit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_beforeSubmitFunction[id])
        {
            _beforeSubmitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _beforeSubmitFunction[id]) < 0)
            _beforeSubmitFunction[id].push(fn);
    }
    else
    {
        for (var i in _beforeSubmitFunction[id])
        {
            if (!_beforeSubmitFunction[id][i]())
                return false;
        }

        return true;
    }

    return x;
};
jQuery.fn.submit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_submitFunction[id])
        {
            _submitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _submitFunction[id]) < 0)
            _submitFunction[id].push(fn);
    }
    else
    {
        x._oldSubmit();
    }

    return x;
};
jQuery.fn.afterSubmit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_afterSubmitFunction[id])
        {
            _afterSubmitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _afterSubmitFunction[id]) < 0)
            _afterSubmitFunction[id].push(fn);
    }
    else
    {
        for (var i in _afterSubmitFunction[id])
        {
            _afterSubmitFunction[id][i]();
        }
    }

    return x;
};

Answer 4

Ну, вы могли бы сделать что-то вроде:

function beforeSubmit() {
    if (isValid($(this)) {
      $.ajax({
          type: 'POST',
          url: '/form/submit',
          success: afterSubmit
      });
    }
    return false;
}

function afterSubmit() {
}