События открытия и закрытия bootstrap3-collapse в Yii2 Collapse виджете

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
voodooism
Сообщения: 44
Зарегистрирован: 2018.11.12, 10:29

События открытия и закрытия bootstrap3-collapse в Yii2 Collapse виджете

Сообщение voodooism » 2019.01.11, 17:00

Имеется проект на Yii2 в котором есть интерфейс с вложенными друг в друга коллапсами. Ниже привожу код:
`index.php`:

Код: Выделить всё

    <?= Collapse::widget([
        'items' => [
            [
                'label' => 'Collapse1',
                'content' => $this->render('1'),
            ],
            [
                'label' => 'Collapse2',
                'content' => $this->render('2'),
            ],
            [
                'label' => 'Collapse3',
                'content' => $this->render('3'),
            ],
        ]
    ]); ?>
`1.php`:

Код: Выделить всё

 <?= Collapse::widget([
        'items' => [
            [
                'label' => 'Collapse1',
                'content' => $this->render('1_1'),
            ],
            [
                'label' => 'Collapse2',
                'content' => $this->render('1_2'),
            ],
            [
                'label' => 'Collapse3',
                'content' => $this->render('1_3'),
            ],
        ]
    ]); ?>
И так далеее...
Выглядит это следующим образом:
Изображение
Для реализации некоторого функционала мне требуется отслеживать открытие-закрытие коллапсов на странице интерфейса. Для этого я решил использовать события предоставленные разработчиками bootstrap3: `shown.bs.collapse` и `hidden.bs.collapse`.
Итак, для тестирования я набросал следующий скрипт:

Код: Выделить всё

var collapse = $('.panel-collapse .collapse');
    
    collapse.on('shown.bs.collapse', function ()
    {
        var active = $(this).attr('id');
        console.log('Showing collapse with ' + active +  ' id');
    });
    
    collapse.on('hidden.bs.collapse', function ()
    {
        var active = $(this).attr('id');
        console.log('Hidden collapse with ' + active +  ' id');
    });
Соответственно, я ожидаю увидеть следующее: при первоначальной загрузке сраницы все коллапсы закрыты. Далее, если я открываю или закрываю коллапс в консоль выводится соответсвующее сообщение.

Проблемы с которыми я столкнулся:
  1. При первоначальной загрузке страницы, когда все коллапсы еще закрыты, у меня срабатывает событие `shown.bs.collapse` и в консоль выводится сообщение: `Showing collapse with #w1-collapse3 id` говорящее о том, что отрисовался коллапс #2.
  2. Когда я открываю самый внешний коллапс (на рисунке #1) - я не получаю уведомление в консоль, следовательно событие `shown.bs.collapse` не срабатывает.
  3. Когда я открываю внутренний коллапс (на рисунке #3) срабатывает событие `shown.bs.collapse` и в консоль выводится два сообщения говорящих о том, что отрисовался коллапсы #2 и #3, хотя коллапс #2 и так уже был отрисован.

Код: Выделить всё

Showing collapse with #w0-collapse1 id
Showing collapse with #w1-collapse3 id

Собственно вопрос, почему так происходит, и как это вылечить?

Ответить