Почему перезагружается страница, когда я перезагружаю только контейнер pjax?

Question

[Денис Сепетов]

Добрый вечер! Вопрос, собственно, в названии. Куда копать и что исследовать, чтобы решить проблему?
Вот самая простейшая разметка:

<button onclick="get_content();">Отобразить таблицу</button>
<div id="content">
    Сюда загрузится GridView от kartik-v
</div>

После нажатия кнопки загрузка идёт самым прямолинейным способом:

function get_content()
{
    $.ajax({
        url: '/some/data',
        type: 'get',
        data: {id: 123},
        success: function(answer) {
            $('#content').html(answer);
        },
    });
}

В контроллере вызываемое действие имеет такой вид:

public function actionData($id)
{
    $tab_content = new TabContent;
    $parameters = $tab_content->getData($id); // возвращает поисковую модель, провайдер данных и вспомогательные переменные
    return $this->renderAjax('view_name', $parameters);
}

Это всё работает и нареканий нет. GridView отображается, работают его фильтры и сортировка. Но на этой же странице есть кнопка, где вызывается такой код:
$.pjax.reload({container:"#kv-pjax-data"});
После его выполнения происходит перезагрузка GridView (что и должно), но после этого сразу начинается перезагрузка всей страницы. Почему так происходит?

Таймаута хватает, я его увеличил и возвращал для проверки пустой GridView. Параллельного pjax-запроса у меня нет ни до, ни после, поэтому я исключаю, что следующий начал выполняться до окончания предыдущего.

spoiler

Настройки виджета такие:

<?= GridView::widget([
    'id' => 'data-grid-view',
    'dataProvider' => $selectedData,
    'filterModel' => $searchSelectedData,
    'pjax' => true,
    'pjaxSettings' => [
        'options' => [
            'id' => 'kv-pjax-data',
            'enablePushState' => false,
        ],
    ],
    'columns' => $columns,
]); ?>

Comments

[Александр]

Как вариант, это может происходить, если в ответе, полученном после вызова $.pjax.reload(), содержится тег head или body, которые могут переопределить текущий документ.
Вам нужно убедиться, что ответ содержит только те данные, которые необходимо вставить в тело контейнера #kv-pjax-data, без дополнительных тегов.

[Денис Сепетов]

Да, этот вариант я проверил. Даже скрупулёзно записал вывод renderAjax в файл (!) и осмотрел. Базовых тегов нет. Правда, там есть и теги link, но я уверен, что в них не должно быть проблем. Ведь так? У меня кое-где это и так встречается, проблем не было.

Answer 1

[Денис Сепетов]

Причина оказалась в том, что pjax берёт данные с текущего url, если не указать явный. В моём случае нужные данные находятся в другом контроллере (не в том, который показывает это представление). Можно поменять так:

let href = '/some/data';
$.pjax.reload({container:'#data-grid-view', url:href, push:false});

Это работает, но pjax игнорирует push = false, когда явно указан параметр url. Но это можно обойти так:

$.pjax({
    url: '/some/data',
        container  : '#data-grid-view',
        push : false,
});

Как видно, вызывается $.pjax(), а не $.pjax.reload(), но работает как reload().

Comments

[Денис Сепетов]

Ах, да, если в url нужно передать какие-то параметры (в actionData(), например, есть обязательный аргумент $id), то можно сделать так:

$.pjax({
    url: '/some/data',
    data: {id:987654321}, // <<=== вот тут можно сделать набор параметров.
    container  : '#data-grid-view',
    push : false,
});

Answer 2

[Дмитрий Б]

https://qna.habr.com/q/109115
https://stackoverflow.com/questions/12004564/pjax-...

Comments

[Денис Сепетов]

Увы, нет. Эти варианты я исключил:

1. таймаут увеличивал вплоть до 30 секунд
   
2. data-method в значении post отсутствует
   
3. возвращаемый из контроллера "огрызок" - не пустой и это чистый html
   
4. редиректа в действии контроллера нет (это вообще не мой случай)
   
5. id контейнера существует, это проверено. Он есть и он работает без нареканий. Перезагрузка страницы начинается уже после его успешного обновления
   

Увы и ах.

[Дмитрий Б]

Денис Сепетов, тогда остается один вариант. Просто подебажить JS PJAX, он довольно простой. Тогда точно будет понятна причина перезагрузки страницы

[Денис Сепетов]

Дмитрий Л, да, спасибо, хотя поверхностный осмотр в дебаге ничего не дал.

Но! Вы навели меня на мысль ещё раз покопать в сторону таймаута. Подозреваю, что я не тот таймаут настраивал. Я же увеличивал таймаут в настройках GridView => pjaxSettings => options => timeout. Может это не оно!

Я завтра (на работе) попробую сделать так:

$.pjax.defaults.timeout = 2500; // <<<===
$.pjax.reload({container:"#kv-pjax-data"});

Контейнер в сущности тот же, но может быть .reload() не использует указанный таймаут в виджете GridView? Ещё, по-моему, таймаут можно передать вторым параметром в самом .reload().

[Дмитрий Б]

Денис Сепетов, я об этом изначально и говорил.
Попробуйте таймаут передавать напрямую в $.pjax.reload({container:"#kv-pjax-data"}); . Не через defaults и прочее, а именно туда. А потом уже порефакторить и попробовать defaults и прочее.
И если не сработает, опять же, вернитесь к дебагу

[Денис Сепетов]

Дмитрий Л, видимо, типа такого (с поправкой на верный синтаксис, конечно):
$.pjax.reload('#pjax-container', {timeout:5555});
Попробую :-)

[Денис Сепетов]

Дмитрий Л, протестировал, это не работает и, кажется, я лузер. Вообще не в ту сторону копал!

Приведённый мною код генерируется одним методом контроллера (actionIndex, например), а грид на него подтягивается из другого (actionData, например). Когда я нажимаю кнопку "Отобразить таблицу" данные успешно забираются из actionData, а когда я перезагружаю контейнер через $.pjax.reload(), то он даже в этот метод не смотрит. Я через дебаг не зафиксировал захода в этот метод :-)
Похоже, по умолчанию он смотрит на текущий метод, который отобразил эту страницу. Теперь буду думать, как подсунуть pjax-у нужный мне url.

P. S. В документации как раз сказано, что pjax перезагружает страницу, когда "получает" пустой документ. У меня именно так!

[Денис Сепетов]

Дмитрий Л, я сумел решить проблему, явно указав для pjax метод контроллера, где нужно брать данные. Три дня работы, не считая выходных!

[Дмитрий Б]

Денис Сепетов, это норма! ))