hi i try to load this widget inside of view file for my post and comments
post:

<?= ListView::widget([
        'dataProvider' => $dataProvider,
        'id'=>'posts',
        'itemOptions' => ['class' => 'item'],
        'itemView' => '_view',
        'summary'=>'',
        'pager' => [
            'class' => \kop\y2sp\ScrollPager::className(),
            'triggerText' => 'Load More news',
            'triggerOffset' => 2000,
            'noneLeftText' => 'انتهای صفحه',
            'enabledExtensions'=>[
                kop\y2sp\ScrollPager::EXTENSION_TRIGGER,
                kop\y2sp\ScrollPager::EXTENSION_SPINNER,
                kop\y2sp\ScrollPager::EXTENSION_NONE_LEFT,
                kop\y2sp\ScrollPager::EXTENSION_PAGING,
            ]
        ],
    ]) ?>

comments: in the 'itemView' => '_view' file

<?= ListView::widget([
                    'dataProvider' => $model->getCommentsDataProvider(),
                    'id'=>'comments'.$model->id,
                    'itemOptions' => ['class' => 'comments_items'.$model->id],
                    'itemView' => '/comment/_view',
                    'summary'=>'',
                    'pager' => [
                        'id'=>'comments'.$model->id,
                        'class' => \kop\y2sp\ScrollPager::className(),
                        'triggerText' => 'نمایش بیشتر',
                        'triggerOffset' => 0,
                        'noneLeftText' => '',
                        'enabledExtensions'=>[
                            kop\y2sp\ScrollPager::EXTENSION_TRIGGER,
                            kop\y2sp\ScrollPager::EXTENSION_SPINNER,
                            kop\y2sp\ScrollPager::EXTENSION_NONE_LEFT,
                            kop\y2sp\ScrollPager::EXTENSION_PAGING,
                        ],
                        //'eventOnPageChange'=>'function(){alert("fds");}'
                        //'eventOnLoad'=> 'function(){alert("sda");}',
                    ],
                ]) ?>

but it set the second one config for first one and dont show load more button

My listview doesn't display new items when scrolling to the last element. I have to click 'Load More Items' in order to load the next page.

This is my ListView:

echo ListView::widget([
                           'dataProvider' => $newitems,
                           'itemOptions' => ['class' => 'col-sm-4 featured-item'],
                           'itemView' => '_item',
                           'pager' => ['class' => ScrollPager::className(), 'item'=>'.featured-item', 'enabledExtensions'=> Array( ScrollPager::EXTENSION_TRIGGER, ScrollPager::EXTENSION_SPINNER, ScrollPager::EXTENSION_NONE_LEFT, ScrollPager::EXTENSION_PAGING ) ],
                           'summary' => false
                      ]);

And this is my _item.php:

  echo "<div class='thumbnail'>
    <div class='caption' >
      <span class='caption-title'>$title</span>
    </div>
    <a href='/'>
       $model->text
    </a>
</div>";

The 'Load More Items' button does seem to feed in when scrolled to the bottom, but shouldn't the plugin automatically load the new items when scrolled to the bottom?

Hello,

I have used scroll pager and pageSize is 1 and i have 5 records but after click on show more button second record shown and after that button is disappear.
My code is below:

echo ListView::widget( [
    'dataProvider' => $dataProvider,
    'itemView' => function ($model, $key, $index, $widget) {

        return $this->render('_item',['model' => $model]);

        // or just do some echo
        // return $model->title . ' posted by ' . $model->author;
    },
    'id' => 'my-listview-id',
    'pager' => ['class' =>\kop\y2sp\ScrollPager::className(),            
                 'enabledExtensions' => [
                \kop\y2sp\ScrollPager::EXTENSION_TRIGGER,
                \kop\y2sp\ScrollPager::EXTENSION_SPINNER,
                \kop\y2sp\ScrollPager::EXTENSION_NONE_LEFT,
                \kop\y2sp\ScrollPager::EXTENSION_PAGING,
            ],],
] );

Please Help.

THanks

I am using the below code

Once i removed the 'pager' block it works fine without duplicate row with pagination.

Search Model File:
public function searchDeals($params)
{
$query = deal::find();
$dataProvider = new ActiveDataProvider([
'query' => $query,
'pagination' => [
'pageSize' => 3 ,
'defaultPageSize'=> 0,
'validatePage' => TRUE,
],
]);
$this->load($params);

    if (!$this->validate()) {
        // uncomment the following line if you do not want to any records when validation fails
        // $query->where('0=1');
        return $dataProvider;
    }

    $query->andFilterWhere([
        'status' => '1',
        'approved_status' => '1',           
        'discount' => $this->discount,      
    ]);
    return $dataProvider;
}

I'm trying to use eventOnLoaded to register a javascript function to be run after loading new content from server, I'm using it like this:

'eventOnLoaded' => new JsExpression("renderStars()")

where renderStars() is a javascript function to render rating stars, it works fine with refreshing the page which loads the initial content, but when scrolling down to load more content, it throws this javascript error:

Uncaught TypeError: Cannot read property 'apply' of undefined

in callbacks.js:31, I've also tried other events like eventOnRendered but got the same result

So, how could I use a JsExpression after loading newer content?

Code Climate consolidates the results from a suite of static analysis tools into a single, real-time report, giving your team the information it needs to identify hotspots, evaluate new approaches, and improve code quality.

VIEW

echo ListView::widget([
                'dataProvider' => $provider,
                'itemOptions' => ['class' => 'item'],
                'itemView' => '_view_item',
                'pager' => [
                    'class' => \kop\y2sp\ScrollPager::className(),
                    'triggerText' => 'Завантажити більше записів',
                    'triggerTemplate'=>'<div class="col-md-12" style="text-align: center; cursor: pointer;"><a class="btn-group-justified btn-xs button button-3d button-primary button-pill">{text}</a></div>',
                    'noneLeftText'=>'',
                    'triggerOffset'=>1,
                    'negativeMargin'=>1,
                    ]
            ]);

CONTROLLER

$provider = new ActiveDataProvider([
                'query' => $Product::find()
                    ->select('*')
                    ->from('product')
                    ->where(['id_category' => $idcat]),
                'sort'=>array(
                    'defaultOrder'=>['title' => SORT_ASC],
                ),
                'pagination' => [
                    'pageSize' => 8,
                    //'pageParam' => 'page',
                    'defaultPageSize'=> 8,
                    'validatePage' => TRUE,
                ],

            ]);

there were duplicates and can not understand why?
24 rows in the database
on page 25 shows TOTAL
and outputs 33

'pageSize' => 4,

$provider = new ActiveDataProvider([
                'query' => $Product::find()
                    ->select('*')
                    ->from('product')
                    ->where(['id_category' => $idcat]),
                'sort'=>array(
                    'defaultOrder'=>['title' => SORT_ASC],
                ),
                'pagination' => [
                    'pageSize' => 4,
                    //'pageParam' => 'page',
                    'defaultPageSize'=> 0,
                    'validatePage' => TRUE,
                ],

            ]);

and outputs 29

whats wrong ?
I found this error ..
(Undefined variable: dataProvider )

Hi,

As soon as I try to implement the scroll-pager I receive error:
Malformed UTF-8 characters, possibly incorrectly encoded

The log tells me the error is thrown by:
yiisoft\yii2\helpers\BaseJson.php

Caused in:
kop\yii2-scroll-pager\ScrollPager.php
Line 380 - 387:

// Register extension
$options = json::encode($options);

More Information:

• Everything in the view (where I'm testing the scroll-pager) is Gii-generated standard code.
• Developing on Windows 10 with newest XAMPP (PHP 5.5.30) install and using up2date yii-advanced template.
• My files are encoded with UTF-8. (I checked to be sure)

Any Ideas what is causing this problem on my end? :)

Thank you & Best Regards

I have use the pager and list view widget with your extension but while clicking on load more it changes the url but the containt remains the same not loading more items...
view code

 <?= 
              ListView::widget([
      'dataProvider' => $listDataProvider,
       'itemOptions' => ['class' => 'item'],
      'options' => [
                    'tag' => 'div',
                    'class' => 'list-wrapper',
                    'id' => 'list-wrapper',
                    ],
       'layout' => "{items}\n {pager}",  
       'itemView' => function ($model, $key, $index, $widget) {
        return $this->render('_list_item',['model' => $model]);

        // or just do some echo
        // return $model->title . ' posted by ' . $model->author;
    },
    'pager' => ['class' => \kop\y2sp\ScrollPager::className()]

              ]);

            ?>

The data provider in controller send data with below code

$pages = new Pagination(['totalCount' => $query->count()]);

        $dataProvider = new ActiveDataProvider([
            'query' => $query,
            'pagination' => [
                'pageSize' => 3,
                //'pageCount'=> $pages, 
            ],
        ]);

An exception appears after update: Invalid Configuration – yii\base\InvalidConfigException
Extension IASPagingExtension requires extensions to be enabled.

Please check your \kop\y2sp\ScrollPager::checkEnabledExtensions() method.
Probably it should look like this?

    protected function checkEnabledExtensions($extensions)
    {
        $extensions = (array) $extensions;
        if(empty($extensions))
            return true;
        else
            return (count(array_intersect($this->enabledExtensions, $extensions)) == count($extensions));
    }

I'm using Spinner extension. It shows spinner when data is loading and removes it after data is loaded.
But is it possible to manually call show() or hide() spinner?
(I use it with Masonry and Imagesloaded and want to hide spinner when images are loaded, not when data is received)

I see within plugin events you have eventOnLoaded, eventOnRender and eventOnRendered however am I dont know how to use these within the code to apply the masonry append function.

Thanks.

I showing content in bootstrap popover row, after i scrolled to second or thrid page bootstrap popover not working,

<?php echo ListView::widget([
                     'dataProvider' => $dataProvider,
                     'itemOptions' => ['style'=>'float:left;','class' => 'item'],
                     'itemView' => '_item',
                     'pager' => [
                        'class' => \kop\y2sp\ScrollPager::className(),
                        'triggerOffset' => 100,
                        'noneLeftText' => 'You reached the end',                        
                        'noneLeftTemplate' => '<div class="ias-noneleft" style="text-align: center;clear:both;">{text}</div>',
                     ],
                     'summary' =>false,
                ]); ?>

<a  data-toggle="popover" data-placement='right' 
                          data-content='<div>Welcome to the yii2 scroll pager</div>' 
                          class="rec_popover"
                          href="<?=Url::toRoute(['list/view','rid' => $list['id']]);?>" data-lightbox-group="3D">
                          <img src="images/list-1.png"  border="0" style="width:190px;height:107px;" />
</a>

Please help to fix this

messages/nl/global.php:

<?php

return [
    'Load more items' => 'Laad meer items',
    'You reached the end' => 'Je hebt het einde bereikt'
];

Scroll-pager has two types of init.

1. implemented
   var ias = jQuery.ias({});

2. not implemented
   var ias = $('#overflow').ias({});

The second type used on example http://infiniteajaxscroll.com/examples/overflow.html

Without this method auto load work incorrectly. It work after end page, but not after end container.

ScrollPager::EXTENSION_SPINNER is not working after update. Spinner doesn't appear.
Check the line 281 in \kop\y2sp\ScrollPager - there should be

'name' => self::EXTENSION_SPINNER,

Extensions and events registration code is duplicated too much. It can be simplified a lot.

1. Inserted widget this way:

    echo ListView::widget([
        'dataProvider' => $dataProvider,
        'itemView' => '_post',
        'itemOptions' => ['class' => 'item'],
        'pager' => ['class' => \kop\y2sp\ScrollPager::className()]
    ]);

At the end of the page appears "Load more items". But it doesnt load more items automatically when I scroll. Loads more items only when I click that link.

How can we hide the url when using yii2-scroll-pager with pjax?

Hello All,
Please help me on this.

I am using the yii2 scroll pagination and in the pagination use the ListView::widget.

when i scroll the page a button shows names as "load more " when i click on that link it load the items but rating start is not showing. Can you please help me on this.

Pls, move initializing from init method to there definition in class. Need to replace $sourcePath in config via $assetManager->bundles to use fork of jquery-ias, (http://www.yiiframework.com/doc-2.0/yii-web-assetmanager.html#$bundles-detail), but its not possible, till sourcepath defines in init method.

Hello,

Do you have anything planned for such a feature?

Something like replicating the Facebook Messages system. Basically, instead of triggering the event on scrolling down, it would trigger it on scrolling up.

Thanks

Hi, does this pager work with Gridview? Because I've tried and the gridview is limited to the default 20, but doesn't show the load more button like it should.

Hey

I'm displaying Yii2's ListView inside a Bootstrap Modal and the content is loaded via Ajax. The problem is in pagination: sometimes it loades correctly, sometimes it loads all the results instead of displaying the load more button and sometimes it shows the load more button even if the result total is less than needed for pagination.

This is my code:

echo ListView::widget([
    'dataProvider' => $history,
    'itemOptions' => ['class' => 'item'],
    'options' => ['class' => 'list-view table-bordered'],
    'itemView' => '_item_view',
    'pager' => [
        'class' => \kop\y2sp\ScrollPager::className(), 
         'triggerTemplate' => '<button class="btn btn-default" style="margin: 0 auto; display: block;">{text}</button>'
    ]
]);

Ajax call:

    $('#modal').modal('show');
    $('#modal .history-index #loading').show();
    $.ajax({
        type: 'GET',
        url: $(this).attr('value')
    }).done(function(data) {
        $('#modal').find('#modalContent').html(data);
        $('#modal .history-index #loading').hide();
    });

Any propositions on how to deal with this?

Hello, I have a view with 2 list views. For example, ListView1 has only one page and the ListView2.

1 - The link "Load More" goes under the ListView1 and not to ListView2.
2 - It's needed 2 clicks on "Load More" to make it, and while it's loading it creates 2 spinners, so I think it's loading results to the 2 Listviews.
I think the problem is on itemOptions because it has the same value item

Here is the implementation:

<?=
    ListView::widget([
        'dataProvider' => $filter,
        'itemOptions' => ['class' => 'item'],
        'pager' => ['class' => \kop\y2sp\ScrollPager::className()],
        'itemView' => function ($model, $key, $index, $widget) {

 ListView::widget([
        'dataProvider' => $portfolio,
        'itemOptions' => ['class' => 'item'],
        'pager' => ['class' => \kop\y2sp\ScrollPager::className()],
        'itemView' => function ($model, $key, $index, $widget) {

Can you help me please?

i have a div that inside has a lot of data, can i use this extension to have a link to load more data instead of show one time in whole one long page.

Thanks.

Hello,

$openExams = ArrayHelper::map(Exams::find()->asArray()->all(), 'id', 'name');
I pass $openExams in listview config
'viewParams' => ['openExams' => $openExams,

When using default pager it works, when i enable
'class' => \kop\y2sp\ScrollPager::className(),

only the first page of items shows the select2 dropdown and then i am left with the default arrow loading spinner for any further items called.

Any ideas on how to fix this?

Regards,
Dennis

VersionEye is a cross-platform search engine for free/libre/open source software libraries. Currently we track more than 325K free/libre/open source libraries from Java, Ruby, Python, Node.JS, PHP, JavaScript, Objective-C, R and Clojure. Soon we will add .NET, Perl and other languages.

Add badges for packagist.org and license.

jQuery IAS plugin has been added to composer. Use it in debug mode instead of saved file.

Configure Codeception tests.

Some code

I'm working with ListView widget with some Pjax reload feature as follow:

    <?php Pjax::end() ?>

    <?php $pjax = Pjax::begin(['id' => 'list_content']); ?>
    <?= ListView::widget([
        'dataProvider' => $dataProvider,
        'layout' => "{pager}\n{items}\n{summary}",
        'itemView' => function ($model, $key, $index, $widget) {
            return $this->render('_list_item',['model' => $model]);
        },
        'pager' => [
            'class' => \kop\y2sp\ScrollPager::className(),
            'eventOnReady' => 'function() {scrollPager = this;}',
        ],
    ]); ?>
    <?php Pjax::end(); ?>

Full code

    <script>
        var scrollPager;
    </script>
    <?php
    $this->registerJs(
        '$("document").ready(function(){
            $("#filters").on("pjax:end", function() {
                $.pjax.reload({container:"#list_content"});
            });
        });'
    );
    ?>

    <?php Pjax::begin(['id' => 'filters']); ?>
    <?php $form = ActiveForm::begin([
        'method' => 'get',
        'options' => [
            'data-pjax' => true,
        ],
    ]); ?>

    <?= $form->field($searchModel, 'author'); ?>

    <?= $form->field($searchModel, 'message'); ?>

    <div class="form-group">
        <?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
    </div>
    <?php ActiveForm::end(); ?>
    <?php Pjax::end() ?>

    <?php $pjax = Pjax::begin(['id' => 'list_content']); ?>
    <?= ListView::widget([
        'dataProvider' => $dataProvider,
        'layout' => "{pager}\n{items}\n{summary}",
        'itemView' => function ($model, $key, $index, $widget) {
            return $this->render('_list_item',['model' => $model]);
        },
        'pager' => [
            'class' => \kop\y2sp\ScrollPager::className(),
            'eventOnReady' => 'function() {scrollPager = this;}',
        ],
    ]); ?>
    <?php Pjax::end(); ?>

Steps to reproduce this problem

• open the page
• select some filters and applay them
• the listview is rebuild via Pjax
• now the "Load more items" is missing
• go to console and write

scrollPager.reinitialize();

or

scrollPager.next();

or

$(window).scroll();

each ends with exactly same way.

Actual result

The link "Load more items" is showing correctly but it's not working.

Expected result

I could click "Load more items" and get the next "package" of items via Ajax.

Please help.

Uncaught TypeError: jQuery.ias is not a function ? why?

Thanks for creating this widget...
i want show 3 listView on a page
can i do?
file :show_all_memorys

   echo ListView::widget([
            'dataProvider' => $memorys,
            'itemView' =>'_memorysItem',
            'itemOptions' => ['class' => 'item'],
            'id'=>'body',
    'layout' => "{summary}\n< div class=\"items\">{items}</div>\n{pager}",
            'pager' => ['class' => \kop\y2sp\ScrollPager::className(),
                'triggerText' => 'نمایش بیشتر',
                'triggerTemplate'=>'<div class="col-md-12" style="text-align: center; cursor: pointer;"><a class="btn-group-justified btn-xs button button-3d button-primary button-pill">{text}</a></div>',
                'noneLeftText'=>'اخر نمایش',
                'triggerOffset'=>10,
                'negativeMargin'=>1,
            ]
]);

in file :_memorysItem

    echo \yii\widgets\ListView::widget([
        'dataProvider' => new \yii\data\ActiveDataProvider(
            ['query'=>\app\models\MemorysComments::find()->where(['memorys_id'=>$memorys->id]),
                'pagination'=>['pageSize'=>2],
                'sort'=> ['defaultOrder'=>['id'=>'DESC'] ] ,]
        ),
        'itemView' =>'_commentItem',
        'itemOptions' => ['class' => 'cm_item_'.$memorys->id],
        'id'=>'body2',
        'layout' => "{summary}\n< div class=\"items\">{items}</div>\n{pager}",
        'pager' => ['class' => \kop\y2sp\ScrollPager::className(),
            'container' => '#cm_item_'.$memorys->id,
            'triggerText' => 'more comment ',
            'triggerTemplate'=>'<div class="col-md-12" style="text-align: center; cursor: pointer;"><a class="btn-group-justified btn-xs button button-3d button-primary button-pill">{text}</a></div>',
            'noneLeftText'=>'end comment showing ',
            'triggerOffset'=>1,
            'negativeMargin'=>1,
        ]
    ]);

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}",
]);

Configure CI server.

when load more than one page, the url will change like "page=2", and now if we refresh, can only display the last page data ,and can't go back to first page,

Is it possible to remove the page number and per page option from URL?

As it seems to be conflicting with my ajax (alternatively how should I change my ajax)

$(document).ready(function() {
$('a.btnsolid-sm').click(function() {
    var Id = jQuery(this).attr('id');
    $.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },
        url : 'http://localhost:8888/blog/viewmodal?id='+Id,
        success: function(response) {
            if(response) {
                $('.modal_blog_wrapper').html(response);
                $('#modal_'+Id).modal('show');
                $(document).on('hidden.bs.modal', modal_id, function (event) {
                    $(this).remove();
                });
            } else {
                alert('Error');
            }
        }
    });

});

});

Use the latest plugin version.

Looks like events doesn't works if they were defined in the pagination widget. https://github.com/kop/yii2-scroll-pager/blob/master/ScrollPager.php#L320

i am getting Undefined variable: dataProvider; can you help me to sort of this issue. my code is given below.

echo yii\widgets\ListView::widget([
    'dataProvider' => $dataProvider,
    'itemOptions' => ['class' => 'item'],
    'itemView' => 'boards',
    'pager' => ['class' => \kop\y2sp\ScrollPager::className()]
]);

Im say sorry before, I dont understand to use this extention ..
Can you see me the example web or web file that use this extention ?

Thank you

Hello, Everythig working but I have a problem with results.
When I click on the button, the second page is called but the results are not printed on the screen.
how is possible?

Below is my code but when scrolling spinner image not coming

<?php echo ListView::widget([
                     'dataProvider' => $dataProvider,
                     'itemOptions' => ['style'=>'float:left;','class' => 'item'],
                     'itemView' => '_item',
                     'pager' => [
                        'class' => \kop\y2sp\ScrollPager::className(),
                        'triggerOffset' => 100,
                        'enabledExtensions' => [
                            'ScrollPager::EXTENSION_TRIGGER',
                            'ScrollPager::EXTENSION_SPINNER',
                            'ScrollPager::EXTENSION_NONE_LEFT',
                            'ScrollPager::EXTENSION_PAGING'
                        ],  
                        'spinnerSrc' => '../web/images/loader.gif',
                        'spinnerTemplate' => '<div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>',
                        'triggerOffset' => 100,
                        'triggerText' => 'Load more items',
                        'triggerTemplate' => '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                        'noneLeftText' => 'You reached the end',                        
                        'noneLeftTemplate' => '<div class="ias-noneleft" style="text-align: center;clear:both;">{text}</div>',

                     ],
                     'summary' =>false,
                ]); ?>

Please help me to fix this issue?

Hello!

In ScrollPager.php on line 336-338:

            $historySettings = Json::encode([
                'prev' => $this->noneLeftText
            ]);

I think it is a typo, should be:

            $historySettings = Json::encode([
                'prev' => $this->historyPrev
            ]);

Hi! Thanks for nice extension!
I think it would be cool if tokens from $summary prop autoupdating (optional).

Thanks for developing this widget.
I used this extension , this working fine, but when I use this extension in ajax call , the infinite scroller are not binding with result, only first page are displaying , while next pages come in in number format and not do automatically scrolling.
Please help me in this regard

Code quality management is a continuous process – unfortunately, it cannot be done once and forgot about. Scrutinizer takes the pain away and helps you make code quality management part of your development workflow. Make your developers happy and your customers even happier.