Как открыть модальное окно с «view» event-а FullCalendar в Yii2?

Question

[Дмитро Рак]

Здравствуйте.
У меня в данный момент уже настроен вызов модального окна со страницей "create":

$.ajax({
            url: 'events/create',
            type: "GET",
            data: {
                date: date
            },
            success: function(data) {
                $('#crEvent').modal('show')
                    .find('#modalContent')
                    .html(data);
            },
            error: function() {
                alert('Error');
            }
        });

Теперь мне нужно вызвать "view" для каждого event-a, и тоже в модальном окне (а потом, соответственно, и "update").
Здесь мне подсказали, как переходить на "view" просто как на страницу. А как теперь при том же событии (клике по event-у) вызывать нужный "view" в модальном окне?

Спасибо.

UPD.

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

Answer 1

[Дмитро Рак]

Огромное спасибо всем, и в особенности Максим Федоров , за обсуждение и помощь!
Прикладываю здесь код своих файлов (тех, что я изменял), возможно, кому-то пригодится.
Файлы CRUD:
_form;
index.php
view.php (просто заменил одну кнопку).

Контроллер:
EventsController

При клике на существующий ивент открывается информация о нём, сверху те же кнопки "Редактировать" и "Удалить" (стандартные при генерации CRUD), только вот кнопка "Редактировать" теперь уже вызывает страницу редактирования для этого ивента внутри этого модального окна. При этом всегда есть возможность вернуться назад к информации при помощи кнопки "Back to info", добавленной в новом условии в _form.php.

Answer 2

[Максим Федоров]

Если нужно выводит данные именно во всплывашке, тогда лучше использовать соответствующий отклик компонента, аля:

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        url = 'http://site.com/default/view?id=' + calEvent.id;
        // тут аяксом загружаем контент для отображения с url
        // выводим его в ранее заготовленную всплывашку
        // и отображаем ее
    }
});

Comments

[Дмитро Рак]

Дело в том, что я использую виджет для yii2. То, что вы написали, работало бы в случае, если бы я всё писал через jquery. Я уже пробовал таким образом прописать eventClick - не работает, мало того, календарь вообще перестаёт загружаться.

[Максим Федоров]

приведите пример Вашего кода, как Вы пытаетесь сделать

[Дмитро Рак]

Я просто ищу такое решение, что можно прописать без правки кода. Потому что сейчас, например, я просто в папке bower, в файле fullcalendar.js добавил eventClick и всё работает. Но это костыль. Я ожидал, что есть возможность это сделать без такой грубой правки - для чего делать виджет, если он хуже обычного на js?

[Максим Федоров]

"Потому что сейчас, например, я просто в папке bower, в файле fullcalendar.js добавил eventClick и всё работает." - никогда так не делайте, это плохо, очень плохо.

Виджет Yii2 это по сути дела обертка для JS-плагина, которая создает JS объект и конфигурирует его согласно заданным настройкам. В этом виджете если не ошибаюсь, отклики на события можно конфигуририровать через свойство clientOptions, т.е. так:

$JSEventClick =new JsExpression("function(calEvent, jsEvent, view) {});        

yii2fullcalendar\yii2fullcalendar::widget([
    'clientOptions' => [                    
        'eventClick' => new JsExpression($JSEventClick),
    ],
]);

[Дмитро Рак]

Максим Федоров:
pastebin.com/Z2D9Rvs7 - index.php;
pastebin.com/5M87vW7b - EventsController;
pastebin.com/Jtzg5dTG - calendar.js

[Дмитро Рак]

Максим Федоров: я согласен, что так не надо делать, я просто пробовал. Просто я ещё новичок в yii2, поэтому я не в курсе всех возможностей. Вот вы говорите про JsExpression, а я с ними дела не имел и у меня сразу вопрос - а как потом в это выражение нужный айди прокинуть?

[Максим Федоров]

эм, какое именно id? эвента по которому кликнули?

[Дмитро Рак]

Максим Федоров: да. Слушайте, сейчас попробовал код
'eventClick' => new JsExpression("function(event) {
alert(event.id);
}")
И всё получилось!Выдает id нужного ивента! Спасибо за подсказку!
Теперь осталось понять, как вызвать через ajax view именно с этим айди, да ещё и в модальном окне, да ещё и чтобы апдейт тоже в этом же окне вызывался...

[Максим Федоров]

// всплывашка окна просмотра
Modal::begin([
    'id' => 'view',
    'header' => '<h2>View Form</h2>',    
    'footer' => \yii\helpers\Html::a('Edit', '$', [
        'id' => 'edit-link',
        'onClick' =>"$('#edit').find('.modal-body').load($(this).attr('href')); $('#edit').modal('show'); return false;"        
    ])
]);
Modal::end();

// всплывашка окна редактирования
Modal::begin([
    'id' => 'edit',
    'header' => '<h2>Edit Form</h2>',        
]);
Modal::end();?>

// обработчик клика на эвенте
'eventClick' => new JsExpression("function(event) {
    viewUrl = 'http://site.com/default/view?id=' + event.id;
    updateUrl = 'http://site.com/default/update?id=' + event.id;
    $('#edit-link').attr('href', updateUrl); 
	$('#view').find('.modal-body').load(updateUrl); 
	$('#view').modal('show');
}")

[Дмитро Рак]

Максим Федоров: спасибо большое, подправил код, чтобы вызывался сразу view, а как сделать, чтобы апдейт в этом же модальном окне был?Не хочу плодить модальных окон кучу.

[Максим Федоров]

замените идентификатор
onClick' =>"$('#view').find('.modal-body').load($(this).attr('href')); $('#edit').modal('show'); return false;"

Answer 3

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

ЕСли в проекте много модалок и они грузят ajax-ом контент, то проще сделать одну модалку и код загрузки, который параметризируется через data атрибуты кнопки, которая его вызывает. Например:

<button type="button" data-toggle="modal" data-url="/myurl" data-header="some-header"></button>

вызвать "view" для каждого event-a,

распишите что Вы имеете в виду, какие events бывают у Вас?

клике по event

Как можно сделать клик по event, если "click" и есть"event"
Видимо Вы ивентами называете, что-то совершенно другое?

Comments

[Дмитро Рак]

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

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

Дмитро Рак: Тогда в чем проблема? Кнопка содержит id блока, отправляется ajax в стандартный actionView только там не render, а rendeAjax. В js в success меняется контент средствами jquery. На каком этапе сложности?

[Дмитро Рак]

Максим Тимофеев: у меня нет id блока, понимаете? И я не прописываю id ивента в его блоке.

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

Дмитро Рак: А как тогда понять на каком блоке ивента клик? Пропишите data-id в чем проблема?

[Дмитро Рак]

Максим Тимофеев: проблема в том, что я хотел это реализовать при минимуме js-кода. Просто дело в том, что у меня уже есть готовый full calendar на jquery. Однако, я хочу именно посредством CRUD в yii2 сделать точно так, как я сделал всё в jquery.
Как прописать data-id и прокинуть туда id ивента, если для получения айди нужно либо обращаться к календарю (event.id и всё такое), либо к php?

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

Дмитро Рак: Покажите код, где генерится календарь, Вы же в него данные передаете, которые он отображает? Там же не произвольные данные? Вот вместе с ними и передайте id.

[Дмитро Рак]

Максим Тимофеев: почитайте комментарии к ответу Максима Федорова. Я уже сделал так, чтобы id передавался, посредством JsExpression. Я уже даже сделал, чтобы view мне показывался в модальном окне. Теперь осталось update в том же модальном окне вызывать...

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

Дмитро Рак: А В чем проблема? Так же как view, только другой action

[Дмитро Рак]

Максим Тимофеев: я просто не умею пока переделывать ссылки в кнопки :)
<?= Html::a(Yii::t('app', 'Update'), ['update', 'id' => $model->id], [
'id' => 'update',
'class' => 'btn btn-primary'
]) ?>
Это у меня сейчас, но проблема в том, что когда я пишу обращение к клику по кнопке с айди "update", то у меня всё в модальном окне подгружается, но тут же перебрасывает на страницу. Но это дело поправимо, несколько минут в документации и гугле, и всё ок.