myks92
@myks92
Нашёл решение — пометь вопрос ответом!

Как сделать сложную форму из нескольких полей + Ajax?

Всем привет! Не могу разобраться как реализовать сложную форму. У меня есть форма с данными назначений: название мероприятия, статус назначения, судья (у судьи есть фио, комитет и категория судейства). Все формы имееют зависимость через Dep Drop от kartik. Скрин моей формы:
5a154f56c1d1c719147775.png

Использую одну модель в форме. Мне необходимо:
1. При выборе мероприятия с помощью Ajax запроса запросить из другой таблицы сколько нужно судей на текущее событие. После чего вывести поля для судей (Судья 1, Судья 2, Судья 3 ) Вот так: 5a1550ea2c612561963871.png

2. На основе выбранных судей провести валидацию

3. Сохранить назначения как новые записи в таблицу базы должно добавиться:
- название мероприятия, статус назначение , судья 1
- название мероприятия, статус назначение , судья 2
- название мероприятия, статус назначение , судья 3

Как это реализовать?
  • Вопрос задан
  • 718 просмотров
Решения вопроса 3
myks92
@myks92 Автор вопроса, куратор тега Yii
Нашёл решение — пометь вопрос ответом!
1. Установить виджет Динамических полей
2. Устранить баг при работе Select2 от Kartik. Для этого строки с 439 по 476 файла "yii2-dynamic-form.js" заменить на

// "kartik-v/yii2-widget-select2"
    var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find('[data-krajee-select2]');
    if ($hasSelect2.length > 0) {
        $hasSelect2.each(function() {
            var id = $(this).attr('id');
            var configSelect2 = eval($(this).attr('data-krajee-select2'));

            if ($(this).data('select2')) {
                $(this).select2('destroy');
            }

            var configDepdrop = $(this).data('depdrop');
            if (configDepdrop) {
                configDepdrop = $.extend(true, {}, configDepdrop);
                $(this).removeData().off();
                $(this).unbind();
                _restoreKrajeeDepdrop($(this));
            }
            var s2LoadingFunc = typeof initSelect2Loading != 'undefined' ? initSelect2Loading : initS2Loading;
            var s2OpenFunc = typeof initSelect2DropStyle != 'undefined' ? initSelect2Loading : initS2Loading;
            $.when($('#' + id).select2(configSelect2)).done(s2LoadingFunc(id, '.select2-container--krajee'));

            var kvClose = 'kv_close_' + id.replace(/\-/g, '_');

            $('#' + id).on('select2:opening', function(ev) {
                s2OpenFunc(id, kvClose, ev);
            });

            $('#' + id).on('select2:unselect', function() {
                window[kvClose] = true;
            });

           if (configDepdrop) {
                var loadingText = (configDepdrop.loadingText) ? configDepdrop.loadingText : 'Loading ...';
                initDepdropS2(id, loadingText);
            }
        });
    }       

    /*
    // "kartik-v/yii2-widget-select2"
    var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find('[data-krajee-select2]');
    if ($hasSelect2.length > 0) {
        $hasSelect2.each(function() {
            var id = $(this).attr('id');
            var configSelect2 = eval($(this).attr('data-krajee-select2'));
            $(this).select2('destroy');
            $.when($('#' + id).select2(configSelect2)).done(initS2Loading(id));

            $('#' + id).on('select2-open', function() {
                initS2Open(id)
            });

            if ($(this).attr('data-krajee-depdrop')) {
                $(this).on('depdrop.beforeChange', function(e,i,v) {
                    var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
                    var loadingText = (configDepdrop.loadingText)? configDepdrop.loadingText : 'Loading ...';
                    $('#' + id).select2('data', {text: loadingText});
                });
                $(this).on('depdrop.change', function(e,i,v,c) {
                    $('#' + id).select2('val', $('#' + id).val());
                });
            }
        });
    }
    */
Ответ написан
Комментировать
qonand
@qonand
Software Engineer
В общем случае:
1. Получаете количество блоков, для каждого блока с помощью JS клонируете инпуты, инициализируете виджеты, добавляете новые инпуты в js-объект формы
2. А тут в чем проблема?
3. Для сохранения реализовываете табличный ввод
Ответ написан
kawabanga
@kawabanga
Судя по соседним ответам, делайте так как сможете. Т.е. мой ответ сейчас не претендует на идеальность или безкостыльность.

Сколько максимально судьей возможно? Сделайте заготовку сразу под всех N судей в форме.
После этого, после выбора типа мероприятия, повесьте событие, чтобы отобразить только необходимое кол-во судей.
А все остальные поставьте невидимыми и с статусом - readonly.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы