PJAX для данных подгруженных в модальное окно

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

PJAX для данных подгруженных в модальное окно

Сообщение Alexum »

Доброго времени суток!

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

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

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

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

// Javascript для отображения модального окна. value содержит url по которому рендерится содержимое модального окна
$('body').on('click', '.modalyii2', function () {
            $('#modal').find('#modalContent')
            .load($(this).attr('value'),function(){
                $('body').waitMe('hide');
                $('#modal').removeClass('fade');
                $('#modal').modal('show');
            });
...
Проблема заключается в том, что при вызове $.pjax.reload() для PJAXа внутри модального окна, происходит просто перезагрузка всей страницы (модальное окно при этом конечно же оказывается закрытым). Если при открытом модальном окне вызвать reload для PJAXа основного окна (за модалькой), то никаких проблем не наблюдается. Т.е. проблема именно с PJAX в модальке.

Может кто подскажет, как правильно использовать PJAX для случаев, когда он в подгруженных данных, если это вообще применимо? Буду признателен за любую информацию. Где-то натыкался на информацию, что нормально подгруженный PJAX не работает, т.к. используется url открытой страницы.

Доп. инфо:
- В консоли ошибок нет,
- Для всех Pjax прописаны большие timeout,
- У всех Pjax и GridView заданы уникальные Id,
- Пробовал для модали 'clientOptions' => ['backdrop' => false], результат отрицательный
- 'data-pjax' => true в options формы модальки, результат отрицательный
- выносил за PJAX за пределы формы, результат отрицательный
- и это не работает $.pjax.reload('#...', {timeout : false});
- Yii2 2.0.11.2
pavlm
Сообщения: 84
Зарегистрирован: 2013.09.02, 16:33

Re: PJAX для данных подгруженных в модальное окно

Сообщение pavlm »

Использовал вложенный пьякс. Чтобы во внутреннем контейнере работала форма нужно во внешнем контейнере сделать formSelector=false.
У вас возможно, не проходит инициализация внутреннего пьякса.
Аватара пользователя
Alexum
Сообщения: 683
Зарегистрирован: 2016.09.26, 10:00

Re: PJAX для данных подгруженных в модальное окно

Сообщение Alexum »

Спасибо за ответ, но проблема не с формой. Если её убрать и отображать только GridView, ничего не меняется. Но на всякий случая я попробовал formSelector = false для обоих контейнеров, ничего не изменилось. И даже полностью убрал PJAX из главного окна, оставив только в модальном - нет разницы.
Если рассмотреть подробно:
В главном окне кликаем по строке в GridView - открывается модальное окно, куда подтягиваются данные по отдельному заданию (index.php?r=jobs/update&id=203453)
Кликаем на строку в GridView в модальном окне, по этому клику деактивируется отдельная запись для задания:

В консоли видим:
Отправляется POST запрос на деактивацию,
Затем появляется GET ... /index.php?r=jobs%2Findex&_pjax=%23penaltyInJobGrid (penaltyInJobGrid - это id PJAX контейнера в модальном окне)
, в Response Хрома "Failed to load response data", т.е. нет данных. По логам на этот запрос происходит рендер frontend\views\jobs\index.php, т.е. главного окна, в котором изначально нет этого контейнера, т.к. контейнер появляется при открытии модального окна.
Затем идёт GET на полную перезагрузку страницы /index.php?r=jobs%2Findex , страница полностью перезагружается.

Как же заставить систему при $.pjax.reload({container:'#penaltyInJobGrid'}); стучаться за обновлёнными данными по адресу, который сгенерировал содержимое для модального окна? (/index.php?r=jobs%2Fupdate&id=203453&_pjax=%23penaltyInJobGrid) а не по URL, в котором открыто модальное окно?

Пока единственное, что пришло на ум - подставлять URL напрямую:

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

$.pjax.reload({url: 'index.php?r=jobs%2Fupdate&id=204163',container:'#penaltyInJobGrid'});
Но в таком случае изменяется URL текущей страницы - на URL по которому отработал PJAX. Может есть другое решение?
pavlm
Сообщения: 84
Зарегистрирован: 2013.09.02, 16:33

Re: PJAX для данных подгруженных в модальное окно

Сообщение pavlm »

Есть еще способ, похожий, но чуть проще.
Можно сделать внутри контейнера скрытую ссылку с нужным адресом, и для нее вызывать .click()
Аватара пользователя
Alexum
Сообщения: 683
Зарегистрирован: 2016.09.26, 10:00

Re: PJAX для данных подгруженных в модальное окно

Сообщение Alexum »

pavlm писал(а): 2017.03.28, 14:32 Есть еще способ, похожий, но чуть проще.
Можно сделать внутри контейнера скрытую ссылку с нужным адресом, и для нее вызывать .click()
В этом варианте тоже изменится URL текущей страницы в браузере, а мне важно, чтобы он оставался от главного окна. В нём используется pushState, фильтры и GridView в PJAX, обновление которого ломается если изменить url. Как вариант можно сохранять в отдельную переменную ссылку от базового окна, делать $.pjax.reload() для контейнера в модали с фиксированным url:, после чего делать reload для контейнера в основном окне подставив в url: базовую ссылку. Смущает меня такой вариант. :cry: .
Последний раз редактировалось Alexum 2017.03.28, 14:53, всего редактировалось 1 раз.
Аватара пользователя
rodion_zlobin
Сообщения: 207
Зарегистрирован: 2017.01.11, 16:33

Re: PJAX для данных подгруженных в модальное окно

Сообщение rodion_zlobin »

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


$(document).on('ready pjax:success', function() {

})

Аватара пользователя
Alexum
Сообщения: 683
Зарегистрирован: 2016.09.26, 10:00

Re: PJAX для данных подгруженных в модальное окно

Сообщение Alexum »

rodion_zlobin писал(а): 2017.03.28, 14:51

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


$(document).on('ready pjax:success', function() {

})

Зачем это тут, не поясните?
Аватара пользователя
rodion_zlobin
Сообщения: 207
Зарегистрирован: 2017.01.11, 16:33

Re: PJAX для данных подгруженных в модальное окно

Сообщение rodion_zlobin »

Была схожая проблема, решил таким образом. Js который рендерит внутри модального, вместо $(function(){}), обернул кодом выше
Аватара пользователя
Alexum
Сообщения: 683
Зарегистрирован: 2016.09.26, 10:00

Re: PJAX для данных подгруженных в модальное окно

Сообщение Alexum »

rodion_zlobin писал(а): 2017.03.28, 15:12 Была схожая проблема, решил таким образом. Js который рендерит внутри модального, вместо $(function(){}), обернул кодом выше
Видимо проблема была какая-то другая, ибо не вижу, чем такая запись может помочь.
Аватара пользователя
maleks
Сообщения: 1992
Зарегистрирован: 2012.12.26, 12:56

Re: PJAX для данных подгруженных в модальное окно

Сообщение maleks »

Alexum писал(а): 2017.03.28, 11:42
Пока единственное, что пришло на ум - подставлять URL напрямую:

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

$.pjax.reload({url: 'index.php?r=jobs%2Fupdate&id=204163',container:'#penaltyInJobGrid'});
Но в таком случае изменяется URL текущей страницы - на URL по которому отработал PJAX. Может есть другое решение?
url: url, replace : false}
Аватара пользователя
Alexum
Сообщения: 683
Зарегистрирован: 2016.09.26, 10:00

Re: PJAX для данных подгруженных в модальное окно

Сообщение Alexum »

maleks писал(а): 2017.03.29, 10:39 url: url, replace : false}
Вон оно как всё просто, спасибо!

Итоговый вариант для одновременного обновления PJAX в модальном и главном окне получился следующим:

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

...
if (($("#jobsGreed").length > 0) && ($("#penaltyInJobGrid").length > 0)){
   $("#penaltyInJobGrid").one('pjax:end', function (){
           $.pjax.reload({container:'#jobsGreed'});
   });
   $.pjax.reload({url: 'index.php?r=jobs%2Fupdate&id={$model->penalty_job_id}',container:'#penaltyInJobGrid', replace : false});
}   

После того как обновляется контейнер в модальном окне, обновляется контейнер в главном окне.
Можно конечно было выставить async:false, но перестают отлавливаться события pjax и спинер загрузки не убирается (зацеплен на события pjax:start и pjax:end ).
Закрыто