Not possible to use multiple pager instances on one page

[cshehadi]

Hi,

Thanks for creating this widget. It's been a big help. But I'm running into an issue when it's used with a ListView Widget that's embedded in tabs. The behavior I get is that I have to click once for each tab. (so if there are three tabs, I have to click three times). On the last click, the new data loads - and I see a separate spinner for each tab while the data is loading. So the tabs must be causing some sort of conflict, but I can't figure out what.

I've tried disambiguating by setting the container id, and item class to be unique for each tab, but I still get the same behavior.

Some code:

my tab widget is:

    echo Tabs::widget([
        'items' => $tab_items,
        'encodeLabels' => false,
        'options' => ['tag' => 'div'],
        'itemOptions' => ['tag' => 'div'],
        'headerOptions' => ['class' => 'level-format'],
        'clientOptions' => ['collapsible' => false],
    ]);

and in each tab view:

echo ListView::widget([
     'dataProvider' => $schedule,
     'itemOptions' => ['class' => $tab_id.'_item'],
     'itemView' => '_description_schedule_item',
     'id' => $tab_id.'_schedule',
     'pager' => [
                'class' => \kop\y2sp\ScrollPager::className(),
                'container' => '#'.$tab_id.'_schedule',
                'item' => '.'.$tab_id.'_item',
                'triggerText' => '<div class="btn more">Load More</div>',
                'noneLeftText' => 'End',
                ],
     'layout' => "{items}\n{pager}",
]);

[hitesh2088]

I am also facing the same problem is there any solution for this issue yet

[hphuoclam]

Help

[hitesh2088]

There is solution for it where you can use linkmanager widgets from yii2 and assign ur next page button to load more and then you can load the next containt in the listview wrapper

[Wingee]

I'm having the same problem. Does anybody have a solution!?

[hitesh2088]

check out this one

Same type of issue

[kop]

@hitesh2088 is right, that's a known bug in the underlying library. No solution found so far.

[ak868308]

Used widget two times on same page then it loads data but recursively shows the same result suppose page size is 10 and records are also 10 when scrolling it shows the same content

suppose applied to listview1 and listview 2

It always trigger listview2 not first ? while scrolling the page the listview1 comes first please help

[maxxer]

@kop could you be more specific on what issue on the library? Is there a bug upstream? thanks

[uktamovdilshod]

Hi guys. My code worked.

<div class="list_1 overflow-scroll">
  <?= ListView::widget([
                        'dataProvider' => $todayReminders,
                        'itemOptions' => ['class' => 'item_1',],
                        'itemView' => function ($model) {
                            return $this->render('_list_reminder', ['model' => $model, 'type' => 1]);
                        },
                        'id' => 'type_1',
                        'summary' => '',
                        'layout' => '{items}{pager}',
                        'pager' => [
                            'container' => '#type_1',
                            'item' => '.item_1',
                            'overflowContainer'=>'.list_1',
                            'next' => '#type_1 .next a',
                            'historyPrev' => '#type_1 .previous',
                            'class' => ScrollPager::class,
                            'paginationSelector' => '#type_1 .pagination',
                            'triggerOffset' => 100,
                            'enabledExtensions' => [
                                ScrollPager::EXTENSION_TRIGGER,
                                ScrollPager::EXTENSION_SPINNER,
                                ScrollPager::EXTENSION_NONE_LEFT,
                                ScrollPager::EXTENSION_PAGING,
                            ],
                        ],
                    ]);
</div>

<div class="list_2  overflow-scroll">
  <?= ListView::widget([
                        'dataProvider' => $nearReminders,
                        'itemOptions' => ['class' => 'item_2',],
                        'itemView' => function ($model) {
                            return $this->render('_list_reminder', ['model' => $model, 'type' => 2]);
                        },
                        'id' => 'type_2',
                        'summary' => '',
                        'layout' => '{items}{pager}',
                        'pager' => [
                            'overflowContainer'=>'.list_2',
                            'container' => '#type_2',
                            'item' => '.item_2',
                            'next' => '#type_2 .next a',
                            'historyPrev' => '#type_2 .previous',
                            'class' => ScrollPager::class,
                            'paginationSelector' => '#type_2 .pagination',
                            'triggerOffset' => 100,
                            'enabledExtensions' => [
                                ScrollPager::EXTENSION_TRIGGER,
                                ScrollPager::EXTENSION_SPINNER,
                                ScrollPager::EXTENSION_NONE_LEFT,
                                ScrollPager::EXTENSION_PAGING,
                            ],
                        ],
                    ]);
</div>

<div class="list_3  overflow-scroll">
  <?= ListView::widget([
                        'dataProvider' => $overdueReminders,
                        'itemOptions' => ['class' => 'item_3',],
                        'itemView' => function ($model) {
                            return $this->render('_list_reminder', ['model' => $model, 'type' => 3]);
                        },
                        'id' => 'type_3',
                        'summary' => '',
                        'layout' => '{items}{pager}',
                        'pager' => [
                            'overflowContainer'=>'.list_3',
                            'container' => '#type_3',
                            'item' => '.item_3',
                            'next' => '#type_3 .next a',
                            'historyPrev' => '#type_3 .previous',
                            'class' => ScrollPager::class,
                            'paginationSelector' => '#type_3 .pagination',
                            'triggerOffset' => 100,
                            'enabledExtensions' => [
                                ScrollPager::EXTENSION_TRIGGER,
                                ScrollPager::EXTENSION_SPINNER,
                                ScrollPager::EXTENSION_NONE_LEFT,
                                ScrollPager::EXTENSION_PAGING,
                            ],
                        ],
                    ]);
</div>