hatand/yii2-selects-chain-widget

This package is abandoned and no longer maintained. No replacement package was suggested.

Chain of HTML 'select' elements for Yii2.

v1.0.5 2018-01-27 13:21 UTC

Requires

• php: >=5.4.0
• beberlei/assert: >=2.9.2
• yiisoft/yii2: >=2.0.5

MIT

• Igor Kharchenko

• yii2
• yii2-widget
• yii2-selects-chain-widget

README

Цепочка HTML-элементов select, при изменении которых отправляется ajax-запрос на изменение содержимого select-а, находящегося ниже по цепочке.
Если пользователь меняет текущий элемент в select-е, то должен выполниться запрос на получение всех доступных option-ов в соседнем select-е снизу.

Цепочка здесь - это вереница из односвязных HTML-элементов select, т.е. каждый взаимодействует только со своим соседом снизу. Можно пройтись по всей цепочке вниз, начиная с какого-либо элемента.

К примеру, ремонтная мастерская по починке приборов.
Поле "тип прибора" зависит от поля "тип работ" (ремонт, чистка прибора итц.), а поле "тип работ" зависит от поля "тип доставки починенного прибора" (служба доставки, самовывоз).
Но предолагается, что если изменить одно поле, то следующее поле должно изменить все свои option-ы, получив их по ajax-у, т.к. для каждого прибора могут быть свои варианты доставки.
К примеру, для холодильника не подходит вариант с самовывозом, а для чайника не нужна доставка через службу доставки.
Получаем вот такую цепочку: Тип прибора -> Тип работ -> Тип доставки. Верхний элемент = тип прибора, нижний элемент = тип доставки.

Логика работы сего модуля такова.
При инициализации назначаются обработчики onchange на все селекторы. В ajax-запросе предполагается, что с серва вернулся вот такой объект:

{
    success: true,
    data: [здесь лежат все элементы]
}

Либо при ошибке:

{
    success: false,
    errorMessage: 'ACTHUNG!'
}

Логика обработчика.

Перед ajax-запросом (функция beforeSend) все элементы, находящиеся ниже в цепочке, disable-ятся.
В запросе по умолчанию отправляется объект:

{
    'data': 'value'
}

, где value - это текст внутри селектора. Можно переопределить этот объект в элементе ajax.data (см. приимер ниже).

После ajax-запроса элемент ниже текущего элемента enable-ится.
Элемент ниже заполняется данными из массива, полученного в ответе.

Можно назначить другой обработчик на эти функции (см. массив ниже), но логика, описанная выше, по умолчанию всё равно выполнится.

[
{
    selector: '#order-typeoforder',
    ajax: {
        url: '//site.com/order/get-types-of-device',
        method: 'POST',
        data: {
            'typeOfOrder': '{value}'
        },
        beforeSend: function() { ... } || null,
        afterSend: function() { ... } || null
    }
},
{
    selector: '#order-typeofdevice',
    ajax: {
        url: '//site.com/order/get-types-of-delivery',
        method: 'POST',
        data: {
            'deliveryType': '{value}'
        },
        beforeSend: function() { ... } || null,
        afterSend: function() { ... } || null
    }
},
{
    selector: '#order-typeofdelivery',
    ajax: {
        ...
    }
},
...
]

beforeSend и afterSend - колбэки, выполняющиеся перед и после отправки ajax-запроса.
Здесь dataFieldName означает примерно следующее:

$.ajax({
    data: {
        dataFieldName: $(selector).text()
    }
});

т.е. оно будет отправлено как ключ объекта вместе с содержимым элемента с селектором selector.

Installation

Using composer:

composer require hatand\yii2-selects-chain-widget