$this->title = 'Три гладиолуса';
$this->params['breadcrumbs'][] = ['label' => 'Букеты', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
+
+$this->registerJsFile('/js/bouquet/bouquet.js', ['position' => \yii\web\View::POS_END]);
?>
+
<div class="bouquet-update p-4">
<?= Html::label('Редактирование букета', null, ['class' => 'h4']) ?>
<h1 class="ms-3"><?= Html::encode($this->title) ?></h1>
'options' => [
'multiple' => true,
'size' => 10,
+ 'id' => 'dual-list-box'
],
'triggerButton' => 'apply-button', // Кнопка, которая будет обновлять список
'clientOptions' => [
- 'moveOnSelect' => false,
+ 'moveOnSelect' => true,
'nonSelectedListLabel' => 'Выбор',
'selectedListLabel' => 'Состав букета',
'filterTextClear' => 'Показать всё',
namespace app\widgets;
-use yii\helpers\Json;
-use yii\web\View;
use yii\helpers\Url;
use softark\duallistbox\DualListbox;
+use yii\web\View;
+
class DualList extends DualListbox
{
public $ajaxUrl; // URL для AJAX-запроса
- public $triggerButton; // ID кнопки, которая будет запускать AJAX-запрос
- protected function registerPlugin($id)
- {
- parent::registerPlugin($id);
+ public $triggerButton; // ID кнопки, которая запускает AJAX-запрос
- $view = $this->getView();
+ public function run()
+ {
+// Рендерим сам виджет DualListbox
+ echo DualListbox::widget([
+ 'name' => $this->name,
+ 'options' => $this->options,
+ 'items' => $this->items, // Передаем начальные данные
+ ]);
- // Проверяем, что URL и кнопка переданы
- if (!$this->ajaxUrl || !$this->triggerButton) {
- return;
+// Подключаем AJAX-обработчик, если передан URL и кнопка
+ if ($this->ajaxUrl && $this->triggerButton) {
+ $this->registerAjaxScript();
}
+ }
- // Получаем URL для AJAX-запроса и кнопки
+ protected function registerAjaxScript()
+ {
+ $id = $this->options['id']; // ID DualListbox
$ajaxUrl = Url::to($this->ajaxUrl);
- $triggerButton = $this->triggerButton ? '#' . $this->triggerButton : null;
-
- // Скрипт для обработки клика по кнопке и отправки AJAX-запроса
- $js = <<<JS
- function loadDualListboxData() {
- console.log('Запрос отправляется на:', '$ajaxUrl');
-
- $.ajax({
- url: '$ajaxUrl',
- method: 'GET',
- success: function(data) {
- console.log('Данные получены:', data);
- if (Array.isArray(data)) {
- let options = data.map(item => `<option value="\${item.id}">\${item.name}</option>`);
- $('#$id').html(options.join('')); // Очищаем список и добавляем новые данные
- $('#$id').bootstrapDualListbox('refresh'); // Обновляем плагин
- }
- },
- error: function(xhr) {
- console.error('Ошибка загрузки данных:', xhr);
- }
- });
- }
+ $buttonId = $this->triggerButton; // ID кнопки
- // Проверим, что кнопка существует
- $(document).on('click', '$triggerButton', function() {
- console.log('Кнопка с ID $triggerButton нажата!');
- loadDualListboxData();
- });
+ $script = <<<JS
+ $(document).on('click', '#$buttonId', function() {
+$.ajax({
+url: '$ajaxUrl',
+type: 'GET',
+dataType: 'json',
+success: function(response) {
+let dualListbox = $('#$id');
- // Печать, чтобы проверить, загружен ли скрипт
- console.log('JavaScript был загружен и привязан!');
-JS;
+// Сохраняем уже выбранные элементы
+let selectedOptions = [];
+dualListbox.find('option:selected').each(function() {
+selectedOptions.push($(this).val());
+});
- // Регистрируем JS скрипт
- $view->registerJs($js);
- }
+// Очищаем список, но оставляем выбранные элементы
+dualListbox.find('option').each(function() {
+if (!selectedOptions.includes($(this).val())) {
+$(this).remove();
}
+});
+// Добавляем новые элементы
+$.each(response, function(value, label) {
+if (!dualListbox.find('option[value="'+ value +'"]').length) {
+dualListbox.append(new Option(label, value, false, false));
+}
+});
+// Восстанавливаем выбранные элементы
+dualListbox.find('option').each(function() {
+if (selectedOptions.includes($(this).val())) {
+$(this).prop('selected', true);
+}
+});
+// Перезагрузка DualListbox
+dualListbox.bootstrapDualListbox('refresh');
+},
+error: function(xhr) {
+console.error('Ошибка AJAX-запроса:', xhr);
+}
+});
+});
+JS;
+ $this->view->registerJs($script, View::POS_READY);
+ }
+}