Кнопка внутри Pjax

[Alsodan]

Доброго всем дня!

Очень жду Вашего доброго совета! Не хватает опыта, чтобы понять свою ошибку.

Есть View. На ней - GridView, обернутая в Pjax. Одна из колонок GridView - это кнопка вызова модального окна. Вот текст основных частей View.

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

//Модальное окно
<?php
Modal::begin([
    'id' => 'modal',
    'size' => 'modal-lg',
    'closeButton' => false,
    'clientOptions' => [
        'backdrop' => 'static',
        'keyboard' => false,
    ],
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>

//Другие данные

    <?php Pjax::begin([
        'id' => 'Reload',
        'timeout' => false,
    ]) ?>

    <?=
    GridView::widget([
        'dataProvider' => $dataProvider,
        ],
        'columns' => [
//Тут разные колонки
            [
                'value' => function ($data) {
                    return Html::button('Модальное окно',
                        ['value' => Url::to(['/Контроллер/Экшен']),
                        'id' => 'modalButton',
                        'class' => 'btn btn-success',
                        'data-pjax'=> 0,])
                         'format' => 'raw',
            ],
        ],
    )
    ?>
    <?php Pjax::end(); ?>

GridView каждые 10 секунд обновляется по таймеру

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

$.pjax.reload({container: '#Reload'});

А вот теперь вопрос:
Почему после обновления GridView перестает работать кнопка вызова модального окна?

[mickgeek]

Модальное окно в Pjax тоже заверните.

[Alsodan]

Увы, не помогло

[padlyuck]

а вы нажатие на кнопку javascript'ом обрабатываете? покажите скрипт?

[Alsodan]

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

$(function(){
    $('#modalButton').click(function (){
        $('#modal').modal("show")
            .find('#modalContent')
            .load($(this).attr('value'));
    });
}); 

[padlyuck]

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

$(function(){
    $('body').on('click','#modalButton',function (){
        $('#modal').modal("show")
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

body для примера, хотя лучше использовать какой-то другой контейнер на странице в котором лежит ваша кнопка и который не обновляется возможно подойдет #Reload

[Alsodan]

Спасибо!

C body работает. #Reload - он же и обновляется.

А можно объяснить, почему не работало?

[padlyuck]

хотя для грида указывать кнопку с жестко заданным id немного не верно, т.к. у вас во всех строках будут кнопки с одинаковым id, что не верно с точки зрения значения атрибута id. id должен быть уникальным на странице

[Alsodan]

Точно. И как лучше поступить? Генерировать id для каждой кнопки? И как их передавать в Скрипт?

[padlyuck]

Класс задать вместо id и обработчик навешивать на класс.
по поводу почему не работал ваш вариант: дело в разнице между bind и live вот тут доступно описано https://toster.ru/q/22322 а по поводу боди - попробуйте всетаки найти контейнер на который это можно навесить, т.к. вешать все на боди сильно напряжно может стать по итогу.

[Alsodan]

по поводу bind и live - получается, что у меня обработчик удалялся после первого-же обновления.
Контейнер для обработчика сейчас нарисуем.
А по поводу класса и id - убираем жестко заданный id, т.к. у нас кнопок в гриде может быть много и привязываем обработчик к классу.
Например:
Оборачиваем Pjax

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

<div class="modal-area"> 

Кнопку в GridView переписываем

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

[
                'value' => function ($data) {
                    return Html::button('Модальное окно',
                        ['value' => Url::to(['/Контроллер/Экшен']),
                        'class' => 'btn btn-success modalButton',
                        'data-pjax'=> 0,])
                         'format' => 'raw',
            ], 

И меняем JavaScript

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

$(function(){
    $('div.modal-area').on('click','.modalButton',function (){
        $('#modal').modal("show")
            .find('#modalContent')
            .load($(this).attr('value'));
    });
}); 

[Alsodan]

Спасибо Вам огромное!!!