Yii2 multiple ListView in one page - yii2

Question

I'm using 2 widgets in one page, Both are using listview, one is for blogs and another one is for pages and both are using ScrollPager. I want to show more button in each separately. The problem is the show more button is shown only for pages but not for blog, if I remove the page widget it will display for blogs. I'm trying to display show more for pages and show more for blogs. I tried by pageParam but the problem still exist.
widget:
class UserPagesWidget extends \yii\base\Widget
{
public $usr_id;
public function run()
{
$dataProviderContent = new ActiveDataProvider([
'query' => Post::find()->Where(['user_id' => $this->usr_id])
->orderBy(['post_crdate' => SORT_DESC]),
'pagination' => [
'pageParam' => 'contentPagination',
'pageSize' => 5,
],
]);
return $this->render('/user/widget/pstList', [
'dataProviderContent' => $dataProviderContent,
]);
}
}
Render file:
<?= ListView::widget([
'dataProvider' => $dataProviderContent,
'summary'=>'',
'itemOptions' => ['class' => 'item'], // LY - FOR ( LOAD MORE )
'emptyText' => 'No Content',
'itemView' => function ($model, $key, $index, $widget) {
return $this->render('/user/profileContent/usr-pst-content',['model' => $model]);
},
'pager' => ['class' => \kop\y2sp\ScrollPager::className()],
]);
?>
Blog Widget:
class UserBlogsWidget extends \yii\base\Widget
{
public $usr_id;
public function run()
{
$dataProviderBlog = new ActiveDataProvider([
'query' => Blog::find()->Where(['user_id' => $this->usr_id])
->orderBy(['blog_update' => SORT_DESC]),
'pagination' => [
'pageParam' => 'blogPagination',
'pageSize' => 6,
],
]);
return $this->render('/user/widget/blgList', [
'dataProviderBlog' => $dataProviderBlog,
]);
}
}
Blog render file:
<?= ListView::widget([
'dataProvider' => $dataProviderBlog,
'summary'=>'',
'itemOptions' => ['class' => 'item'], // LY - FOR ( LOAD MORE )
'emptyText' => 'No Blogs',
'itemView' => function ($model, $key, $index, $widget) {
return $this->render('/user/profileContent/usr-blg-content',['model' => $model]);
},
'pager' => ['class' => \kop\y2sp\ScrollPager::className()],
]);
?>
Both widgets are called in one view file.
<div class="row chn-row">
<div class="col-sm-12" style="padding:15px">
<!-- separing -->
<?= UserPagesWidget::widget(['usr_id' => $model->user_id]) ?>
<!-- separing -->
</div>
<div class="col-sm-12" style="padding:15px">
<?= UserBlogsWidget::widget(['usr_id' => $model->user_id]) ?>
</div>
</div>
The problem is the show more button is displayed only for pages.

Answer 1

You need to adjust selectors to distinguish between two widgets. By default ScrollPager uses some generic selector (.list-view) that will match all list views. You should explicitly set ID for ListView widgets and use it in ScrollPager config as selector for widget initialization.
<?= ListView::widget([
// ...
'dataProvider' => $dataProviderBlog,
'options' => ['id' => 'blog-list-view'],
'pager' => [
'class' => \kop\y2sp\ScrollPager::className(),
'container' => '#blog-list-view',
'paginationSelector' => '#blog-list-view .pagination',
],
]) ?>
<?= ListView::widget([
// ...
'dataProvider' => $dataProviderContent,
'options' => ['id' => 'content-list-view'],
'pager' => [
'class' => \kop\y2sp\ScrollPager::className(),
'container' => '#content-list-view',
'paginationSelector' => '#content-list-view .pagination',
],
]) ?>
See https://kop.github.io/yii2-scroll-pager/#general-options