Почему может некоректно работать пагинация в GridView загруженых через Ajax?

Question

[Kir Burov]

Часть представления с Tab панелями. Загружается содержимое скриптом.

<?php
$js = <<< 'SCRIPT'
$('[data-toggle="tab-ajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');

    return false;
});
SCRIPT;
$this->registerJs($js);
?>
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs tabs-up">
        <li><?= Html::a('tab1', ['/site/tab1'], ['data-target' => '#tab1pane', 'data-toggle' => 'tab-ajax'])?></li>
        <li><?= Html::a('tab2', ['/site/tab2'], ['data-target' => '#tab2pane', 'data-toggle' => 'tab-ajax'])?></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab1pane"></div>
        <div class="tab-pane" id="tab2pane"></div>
    </div>

</div>

Загружаемое в таб представление

$dataProvider = new  ActiveDataProvider([
    'query' => Street::find(),
    'pagination' => ['pageSize' => 10, 'pageParam' => 'tab1content',],
]);

Pjax::begin(['enablePushState' => true]);
echo GridView::widget([
    'dataProvider' => $dataProvider,
    'options' => ['id'=>'tab1content'],
]);
Pjax::end();

загруженый GridView c пагинацией работает, но если переключиться на другой таб и обратно то пагинация уже не работает.
В чём может быть моя ошибка?

Answer 1

[Никита Кит]

Это скорее всего потому что содержимое таба уходит в display: none, при переключении обратно - в display: block. При этом надо заново переинитить функцию, отвечающую за логику работы содержимого. На самом деле вместо этого я бы написал для содержимого таба на css класс-состояние (он кста у тебя есть), при котором ему не надо уходить в display: none. Например:

.tab-pane{
pointer-events: none;
opacity: 0;
&.active{
pointer-events: auto;
opacity: 1;
}
}

Тогда его значение в контексте дома со всеми параметрами будет сохраняться, а js перестанет его терять. Естественно вместо $this.tab('show'); нужно написать свои табы с манипуляцией классов.
Как пример (там есть много лишнего под адаптивную базу, но в той же директории можешь свериться с разметкой и забрать себе только нужное):
https://github.com/WebKieth/Black-UI/blob/master/s...

Comments

[mitaichik]

Бред. Display none не удаляет обработчиков. Обработчики удаляются если удалять сам dom элемент - вот это сожет быть. А юзать при этом опасити - дикий костыль.

[Никита Кит]

mitaichik: нет, не бред. Сам ты бред. Никто не говорит, что display none удаляет обработчики. Где ты в моём ответе это вычитал? Я сказал, что при display none теряется огромное количество свойств элемента, которые могут использоваться в скриптах. Значения пропорций элемента, их размещения в потоке флексов... пропадает всё. Я с таким сталкивался, когда в аккордеон решил спрятать слайдер и тоже долго тупил. А юзать opacity + pointer-events - не костыль. Сам ты костыль. Эти два свойства интерпретируются блинком куда быстрее, чем display none - block. Расскажи человеку, у которого вёрстка за 0.4 сек грузится

[mitaichik]

Никита Кит: 0.3 сек! Моя верстка твоя верстка шатал! Шучу, не обижайтесь )

По теме: на точность не претендую, в фронтенде профан, но:

1. Ваш предложение переинитить функцию которая отвечает за логику после ухода в display:none предполагает что вы считаете будто эта логика сбрасывается (иначе зачем заново инитить), что не является правдой.

2. В yii по умолчанию bootstrap 3, так что флекса там нет. Так же в кода используются стандартные элементы bootstrap и yii у которых нет проблем с повторным отображением (я про то что теряются пропорции и прочее).

3. Opacity:0 - не скрывает элемент, а всего лишь делает его прозрачным, элемент то все еще показывается. Сравнивать opacity и display - это как сравнивать теплое с мягким - у них совершенно разно предназначение.

Ну и чтоб мотивировать вас на ответ - небольшое подтрунивание: Middle User Interface Web Developer -
чувствуется уровень мидла :)))

А по теме: pjax в yii может быть опасной штукой: он хоть и обновляет только часть страницы, но может грузить js от всей страницы, например, заново загрузит jQuery который может сбросить обработчики, или выполнить повторную инициализацию элементов которые уже инициализированны. Вангую что проблема где-то в этой стороне.

[Никита Кит]

mitaichik:

. Ваш предложение переинитить функцию которая отвечает за логику после ухода в display:none предполагает что вы считаете будто эта логика сбрасывается (иначе зачем заново инитить), что не является правдой.

Эта логика сбрасывается, потому что она может опираться на параметры высот, ширин, отступов итп. Она может сбрасываться. Если ты с этим не сталкивался, это не значит, что такого не бывает. Ещё раз для твоего тугопонимающего аппарата повторю - попробуй в табах/аккордеонах, опирающихся на display:none создать слайдер. Ты поймёшь о чём я.

В yii по умолчанию bootstrap 3, так что флекса там нет. Так же в кода используются стандартные элементы bootstrap и yii у которых нет проблем с повторным отображением

Это тут вообще не при чём, я и так по коду понял, что в нём этот сраный говнострап. Лишь бы этот кусок дерьма втусить куда нибудь. Правильно, backendеры ведь не могут адекватно компонентно писать интерфейс. Почему бы не поднасрать им бутстрапом - пипл хавает.

Opacity:0 - не скрывает элемент, а всего лишь делает его прозрачным, элемент то все еще показывается. Сравнивать opacity и display - это как сравнивать теплое с мягким - у них совершенно разно предназначение.

display: none не скрывает элемент, а удаляет все его параметры стилей. Скрывает visibility hidden, раз уж ты решил до определений до*ться. И поверь мне - opacity + pointer-events прячет элемент не хуже display none с точки зрения юзабилити, а с точки зрения performance намного более производительный способ, и намного более дружелюбный к транзишенам на css, нежели display none. Я уверен, что при переключении табов логику внутренних компонентов достаточно обернуть в функцию и переинициализировать, чтоб она заработала. Или, что более производительно, использовать opacity + pointer-events. Хватит спорить, я доказывал это в боевых проектах не раз. Вот тебе пример со слайдером в аккордеоне - посмотри js - там остались sourcemaps: ntpo-vektor.ru/sertifikates.html
Вот тебе пример модалок на opacity + pointer-events: extremeart.spb.ru
Найди хоть одно отличие в юзабилити. Нет их. А браузеру произвести эту анимацию гораздо легче, чем изменять display.