Как выполнить функцию после вызова другой?

Question

[Алексей Коновалов]

Всем привет! На сайте есть форма:

<form name="upload" data-ajax="true" data-callback="after_upload($(this))">
<!-- ............ элементы формы -->
</form>

data-ajax="true" определяет то, что данные будут передаваться через ajax и для этого используется одна функция, которая сериализует форму и отправляет её по адресу который определяется по параметру name формы.

Я хочу сделать так, чтобы я смог указать функцию которая запустилась бы после успешного выполнения ajax запроса. И вот что у меня получилось:

<script>
    $('form[data-ajax]').on('submit', function(event){
        event.preventDefault();
        var th = $(this);
        var form_name = th.attr('name');

        var data = th.serialize();
        $.post('/ajax/'+form_name,{data: data})
        .success(function(d){
            // парсится ответ и в зависимости от ответа 
            // показывает либо ошибки, либо информацию о сохрнении
            ParseResponse(d, 'form[name='+form_name+']');
            
            // Вот таким образом я добавил возможность запуска функции, которая описана в форме
            // это нужно для того чтобы уже в функции callback определить какие действия выполнить с введенными данными
            // либо очистить форму, либо частично очистить и тому подобное
            var callback = th.data('callback');
            eval(callback);
        });
    });
</script>

Мне этот способ кажется не правильным, но я не могу придумать другой. Например с возможностью указания каких-то callback параметров.

Answer 1

[Anton fon Faust]

Во-первых, читайте про замыкания и bind.
Во-вторых, вам eval тут не нужен триста лет.
В-третьих, data-callback="after_upload($(this))", который у вас потом отправится в eval - это вообще феерический говнокод.

Даже если у вас на странице куча форм с разными коллбеками, правильнее и безопаснее было бы сделать, например, фабрику, которая возвращает нужный коллбек в зависимости от параметра.

Например так:

<form name="upload" data-ajax="true" data-callback="after_upload_1">
<!-- ............ элементы формы -->
</form>

<script>
    function callbackForge(type) {
        var callback;
        switch (type) {
            case "after_upload_1": callback = function(a,b,c) {...}; break;
            case "after_upload_2": callback = function(a,b,c) {...}; break;
            ...
            case "after_upload_n": callback = function(a,b,c) {...}; break;
        }
        return callback;
    }

    $('form[data-ajax]').on('submit', function(event){
        event.preventDefault();
        var th = $(this);
        var form_name = th.attr('name');

        var data = th.serialize();
        var callback = callbackForge(th.data('callback'));

        $.post('/ajax/'+form_name,{data: data})
        .success(function(d){
            // парсится ответ и в зависимости от ответа 
            // показывает либо ошибки, либо информацию о сохрнении
            ParseResponse(d, 'form[name='+form_name+']');
            callback(th, data, event); // и тут уже какие параметры хотите, такие и передавайте
        });
    });
</script>

Comments

[Алексей Коновалов]

Спасибо! Опираясь на ваш ответ решил сделать так:

var callbackForge = {

    types: [],

    add: function (type, func) {
        this.types[type] = func;
    },

    get: function (type) {
        if (this.types[type]) {
            return this.types[type];
        }
        return false;
    }

};

И добавлять в фабрику функции по мере необходимости. т.к. не все функии должен видеть пользователь в готовом js файле в switch