Модальное окно, jquery не принимает id. В чем ошибка?

Question

[Андрей]

Имеется таблица grid со столбцом

[
                        'class' => 'yii\grid\ActionColumn',
                        'template' => '{select}',
                        'buttons' => [
                            'select' => function($url){
                                return Html::a('<span class="glyphicon glyphicon-share" style="color:#228B22"></span>',$url, [
                                    'title' => 'Выбрать пункт приема',
                                    'class' => 'select',
                                    'data-toggle' => 'modal',
                                    'data-target' => 'unload'
                                ]);
                            }
                        ]
                    ]

Сама модалка стандартная из bootstrap.

spoiler

<div class="modal fade" id="unload" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="exampleModalLabel">Пункт приема</h2>
                </div>
                <div class="modal-body">
                    <p>....</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success">Save changes</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

И собственно js:

<?php $this->registerJs(
    "
    $('.select').on('click', function(){
            var data = $(this).data();
        $('#unload').modal('show');
        $('#unload').find('.modal-title').text('id:' + data.key);
    });
    "
); ?>

Проблема в том что в модалке id:undefined. Если код поменять на
$('.grid-view tbody tr').on('click', function()
то все работает. Где я не так делаю?

Answer 1

[Максим Тимофеев]

если Вы уже указали 'data-toggle' => 'modal', то зачем еще раз клик обрабатываете. Она же дважды срабатывает. Возможно в этом и проблема.

Comments

[Андрей]

не совсем понял как видоизменить

[Максим Тимофеев]

Андрей, 'data-toggle' => 'modal', убрать

[Андрей]

Максим Тимофеев, ааа, в этом плане. Убирал, рендериться страница по ссылке. А должна в модалке быть

[Максим Тимофеев]

Андрей, а чего ж ей так не делать? отмените стандартное действие в скрипте
https://developer.mozilla.org/ru/docs/Web/API/Even...

[Андрей]

Максим Тимофеев Пробовал вот так, не работает:

$('.select').on('click', function(event){
            event.preventDefault();
            var data = $(this).data();
        $('#unload').modal('show');
        $('#unload').find('.modal-title').text('id:' + data.key);
        $('#unload').find('.modal-body').load('/operator/select?id=' + data.key);
    });

[Максим Тимофеев]

Андрей, ошибки в консоле? Должно работать.

[Андрей]

Максим Тимофеев Модалка правильно рендерится, но id:undefined. Консоль ошибок не нашел

[Максим Тимофеев]

Андрей,

но id:undefined.

А чего оно должно быть другим, если у кнопки нет атрибута data-id?

[Андрей]

Максим Тимофеев, нет, фокус не удался. все так же

'select' => function($url,$key){
                                return Html::a('<span class="glyphicon glyphicon-share" style="color:#228B22"></span>',$url, [
                                    'title' => 'Выбрать пункт приема',
                                    'class' => 'select',
                                    'data-target' => 'unload',
                                    'data-id' => $url
                                ]);
                            }

[Максим Тимофеев]

Андрей, а как по Вашему 'data-id' превратиться в data.key?
Надо ж было сменить на data.id

[Андрей]

Максим Тимофеев, Спасибо, помогли. Терпение у вас конечно железное