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

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

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

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

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

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

Как это реализовать?
  • Вопрос задан
  • 748 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 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. Для сохранения реализовываете табличный ввод
Ответ написан
4 комментария
4 комментария
kawabanga
@kawabanga Куратор тега Yii
Судя по соседним ответам, делайте так как сможете. Т.е. мой ответ сейчас не претендует на идеальность или безкостыльность.

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
PHP-developer / PHP-разработчик
Wanted
До 250 000 ₽
PHP Developer (Senior)
Zenfox Media
от 4 500 до 5 500 $
Team Lead в Vodohod.Tech (TravelTech-сегмент)
Geekfactor • Москва
от 350 000 до 350 000 ₽
Ещё вакансии