This extension uses Infinite Ajax Scroll, a jQuery plugin
Update ¶
March 5, 2013 Added loaderText public property. Thanks to maxxdev
February 8, 2013 Now you can manually trigger loading page. Thanks to Junior - df9. Example code also has been updated.
Requirements ¶
Yii
Usage ¶
Put this extension to your extensions directory
Example code
$this->widget('zii.widgets.CListView', array(
'id' => 'VideoList',
'dataProvider' => $dataProvider,
'itemView' => '_view',
'template' => '{items} {pager}',
'pager' => array(
'class' => 'ext.infiniteScroll.IasPager',
'rowSelector'=>'.row',
'listViewId' => 'VideoList',
'header' => '',
'loaderText'=>'Loading...',
'options' => array('history' => false, 'triggerPageTreshold' => 2, 'trigger'=>'Load more'),
)
)
);
afterAjaxUpdate
If you need to run javascript after new items been loaded (in case some jquery breaks...) then add 'options'=>array('onRenderComplete'=>'js:function () { ///js code here }'),Error noticed
My testdrive is fatal on
$cs->registerCSSFile($this->baseUrl . '/css/jquery.ias.css') ->registerScriptFile($this->baseUrl . '/js/jquery.ias.js', CClientScript::POS_END); need to be change as $cs->registerCSSFile($this->baseUrl . '/css/jquery.ias.css'); $cs->registerScriptFile($this->baseUrl . '/js/jquery.ias.js', CClientScript::POS_END); and CArray::merge($this->options, need to be change as CMap::mergeArray($this->options,This works beautifully!
Thank you so much!
Thank You!
Beautiful code, thank you for taking the time to make this!
This is goddamn beautiful.
Thanks for your great contribution.
One limitation
This widget works great. However it relies on the pagination of CListView, I need to pass models of object instead of array of object. Do you have any idea how to improve it?
Array of models
If you have array of models then you could create CArrayDataProvider and still use CListView with this extension
Multiple infinite scrolls in the same page?
Hi, Thanks for this great contribution.
I am implementing the tabs in my page so I want multiple infinite scrolls for every tabs...
Is there a way to do so? Right now only one is allowed per page.
Manual Trigger
Hello!
Please, update the extension so ppl can enjoy the new feature "Manual Trigger"
Thanks in advance
Regards!
Pls add ability to change loader text
Thanks for extension.
Pls add ability to change loader text
public $loaderText = 'Loading...'; 'loader' => $this->loaderText ,Double call to get page and get always 1st page
Hi, guys, I'm probably missing sth but infinite always get the first page of the dataprovider.
I saw in firebug that it makes 2 calls:
1 - call the url to get the second page - OK
2 - call the url of the page without parameters (maybe here gets the first page again) - wrong?
The content is always appended by the first page
Any clues on how to solve this?
Thank you very much!
Answering my own question after hours
After hours debugging javascript, it was not the problem...I just removed some URL rules in the main config file.
As I use slugs to show beautiful URLs, it seems that the following rule:
'webtv/<slug:[a-zA-Z0-9-]+>'=>'webtv/view',
Was messing things out.
My infinite-scroll is in the index action of WebtvController and when it calls for the 2nd page, the "view" action is called, which has a redirect when it can't find the model by slug, so a second call is made to the webtv index, giving the first page again...
Thanks anyway guys
Regards
Not working on CListView update
Hi,
This is an awesome plugin, it helped me a lot! I have a slight problem which I was trying to correct with no success ...
When the page loads for the first time, the infinite scrolling works ok. But if I am making an $.fn.yiiListView.update() on the list that has the infinite scrolling, it stops working and it displays the pagination buttons instead.
Does anyone knows how to solve this issue ? It took me hours to solve this but I didn't find a solution.
Thanks so much !
Skylight
Hi, have you tried calling "jQuery.ias(..." code again after the "..fn.update..." ?
regards
Junior - df9
Hi,
Thanks for the fast replay... It's indeed the first thing I've tried ... It seems it is working now but the pagination buttons are still displayed after the update ...
Regards
URL changes when you scroll.
Hi, i noticed that the url has changed to 123.com/page/2 when you scroll down. This is a little bit inconvenience because user can't click go back in their browse to go back to previous page anymore, they are going to /page/1 instead. Also, if you refresh the page, the url stays as /page/2 which automatically scrolls you down.
Is there a way to prevent this from happening? (so the url remains the same all the time when you scroll)
Thank you.
Disable history
Try set history=>false as in example code to disable history support
Not working
Hey guys this isnt working for me; CActiveDataProvider creation:
public function search($User_Id='',$Favoritos=false) { // Warning: Please modify the following code to remove attributes that // should not be searched. $criteria=new CDbCriteria; $criteria->with=array('subtipoElemento','estado','ciudad','objetivo','elementoPrecioOrden'); switch ($this->Elemento_Tipo) { case 1: array_push($criteria->with,'eInmueble'); break; case 2: array_push($criteria->with,'eVehiculo'); array_push($criteria->with,'eVehiculo.fasecolda'); break; } if($User_Id!=''){ if($Favoritos){ array_push($criteria->with,'elementoFavoritos'); $criteria->compare('elementoFavoritos.Usuario_Id',$User_Id); } else { $criteria->compare('Owner_Id',$User_Id); } } //$criteria->compare('Elemento_Id',$this->Elemento_Id); if($this->Elemento_Tipo!=''){$criteria->addCondition('subtipoElemento.Tipo_Elemento_Cd='.$this->Elemento_Tipo);} if($this->Elemento_Subtipos!=''){$criteria->addInCondition('t.Subtipo_Elemento_Cd',$this->Elemento_Subtipos);} //if($this->Elemento_Objetivos!=''){$criteria->addInCondition('Objetivo_Cd',$this->Elemento_Objetivos);} if($this->Elemento_Ubicaciones!=''){$criteria->addInCondition('eInmueble.Ubicacion_Opcion',$this->Elemento_Ubicaciones);} if($this->Elemento_Ciudades!=''){$criteria->addInCondition('t.Ciudad_Id',$this->Elemento_Ciudades);} if($this->Elemento_Tipo==1){ if($this->Numero_Habitaciones_Min!='' && $this->Numero_Habitaciones_Max!='') {$criteria->addBetweenCondition('eInmueble.Numero_Habitaciones',$this->Numero_Habitaciones_Min,$this->Numero_Habitaciones_Max);} if($this->Numero_Banos_Min!='' && $this->Numero_Banos_Max!='') {$criteria->addBetweenCondition('eInmueble.Numero_Banos',$this->Numero_Banos_Min,$this->Numero_Banos_Max);} if($this->Numero_Parqueaderos_Min!='' && $this->Numero_Parqueaderos_Max!='') {$criteria->addBetweenCondition('eInmueble.Numero_Parqueaderos',$this->Numero_Parqueaderos_Min,$this->Numero_Parqueaderos_Max);} if($this->Ano_Construccion_Min!='' && $this->Ano_Construccion_Max!='') {$criteria->addBetweenCondition('eInmueble.Ano_Construccion',$this->Ano_Construccion_Min,$this->Ano_Construccion_Max);} if($this->Area_Construida_Min!='' && $this->Area_Construida_Max!='') {$criteria->addBetweenCondition('eInmueble.Area_Construida',$this->Area_Construida_Min,$this->Area_Construida_Max);} if($this->Elemento_TiposCocina!=''){$criteria->addInCondition('eInmueble.Tipo_Cocina_Opcion',$this->Elemento_TiposCocina);} if($this->Elemento_TiposPiso!=''){$criteria->addInCondition('eInmueble.Piso_Opcion',$this->Elemento_TiposPiso);} if($this->Elemento_TiposTecho!=''){$criteria->addInCondition('eInmueble.Techo_Opcion',$this->Elemento_TiposTecho);} } elseif($this->Elemento_Tipo==2){ if($this->Ano_Vehiculo_Min!='' && $this->Ano_Vehiculo_Max!=''){$criteria->addBetweenCondition('eVehiculo.Ano',$this->Ano_Vehiculo_Min,$this->Ano_Vehiculo_Max);} if($this->Elemento_Marcas!=''){$criteria->addInCondition('fasecolda.Marca',$this->Elemento_Marcas);} if($this->Elemento_Lineas!=''){$criteria->addInCondition('fasecolda.Referencia1',$this->Elemento_Lineas);} if($this->Elemento_Combustibles!=''){$criteria->addInCondition('eVehiculo.Combustible_Opcion',$this->Elemento_Combustibles);} if($this->Elemento_Transmisiones!=''){$criteria->addInCondition('eVehiculo.Transmision_Opcion',$this->Elemento_Transmisiones);} //if($this->Elemento_Direcciones!=''){$criteria->addInCondition('eVehiculo.Direccion_Opcion',$this->Elemento_Direcciones);} //if($this->Elemento_Blindajes!=''){$criteria->addInCondition('eVehiculo.Blindaje_Opcion',$this->Elemento_Blindajes);} /*$criteria->compare('Activo',$this->Activo);*/ } return new CActiveDataProvider($this, array( 'criteria'=>$criteria, 'sort'=>array( 'attributes'=>array( 'Objetivo_Cd'=>array( 'asc'=>'objetivo.Objetivo_Desc', 'desc'=>'objetivo.Objetivo_Desc DESC', ), 'Ciudad_Id'=>array( 'asc'=>'ciudad.Nombre_Ciudad', 'desc'=>'ciudad.Nombre_Ciudad DESC', ), 'Subtipo_Elemento_Cd'=>array( 'asc'=>'subtipoElemento.Subtipo_Elemento_Desc', 'desc'=>'subtipoElemento.Subtipo_Elemento_Desc DESC', ), 'PrecioOrden'=>array( 'asc'=>'elementoPrecioOrden.Precio ASC', 'desc'=>'elementoPrecioOrden.Precio DESC', ), '*', ), ), )); }View using CListView to display the dataProvider:
<?php $this->pageTitle='Home';?> <?php if(isset($model)){ ?> <div style="font-size: 1.5em;">Inicio</div> <?php } else {?> <?php } ?> <?php if(isset($model)) $dataProvider=$model->search(); $this->widget('zii.widgets.CListView', array( 'id'=>'elemento-list', 'dataProvider'=>$dataProvider, 'itemView'=>'application.modules.anunzo.views.elemento._view', 'template'=>'{summary}{sorter}<div class="clear"></div>{items}<div class="clear"></div>{pager}', 'sortableAttributes'=>array( 'Subtipo_Elemento_Cd', 'Objetivo_Cd', 'Ciudad_Id', 'PrecioOrden' ), 'summaryText'=>'Resultados: {start}, {end}, {count}', 'pager' => array( 'class' => 'ext.infiniteScroll.IasPager', 'rowSelector'=>'.row', 'listViewId' => 'elemento-list', 'header' => 'Hey', 'loaderText'=>'Loading...', 'options' => array('history' => false, 'triggerPageTreshold' => 10, 'trigger'=>'Load more'), ), ));?>Adding
I am floating the items so the items div doesnt seem to have any height (when higlighted in firebug doesnt shade al the CListView). Could this affect somehow?
the same page number
when i press "load more" at first, next page successfully loading, but when i pressing "load more" again - it's loading the same page again, but not next
hi friends
this is not working fine for me.
How do I use callback function after ajax update?
I want to change something on items after update page. So, I used:
'pager' => array( 'class' => 'ext.infiniteScroll.IasPager', 'rowSelector'=>'.noteItem', 'listViewId' => 'noteCList', 'header' => '', 'loaderText'=>'Loading...', 'options' => array( 'history' => true, 'triggerPageTreshold' => 4, 'trigger'=>'Load more', 'onRenderComplete'=>"function(items) {console.log('We rendered ' + items.length + ' items');}", ), ),The function for 'onRenderComplete' i found at http://goo.gl/drrPJ
But console window output error:
Uncaught TypeError: Object function(items) {console.log('We rendered ' + items.length + ' items');} has no method 'call' //jquery.ias.js line 222
about after ajax update
@Davuz,
Your function casts as string by Yii. If you add js: before the function, it will be work perfectly.
Eg:
'onRenderComplete'=>"js:function(items) {console.log('We rendered ' + items.length + ' items');}",
Works good !
Works very good once you know that setting the 'rowSelector' and 'listViewId' is necessary. Maybe someone should update the Documentation. Thanks for this work !
Pager changes after sorting
Has anyone ever tried to use sorting feature with this extension? The pager changed to normal CListView pager and 'Load more' button disappeared after I clicked sort link.
$this->widget('zii.widgets.CListView', array( 'id'=>'list-comment', 'dataProvider'=>$dataProvider, 'enableSorting'=>true, 'sortableAttributes'=>array('up_vote', 'date'), 'template'=>'{sorter} {items} {pager}', 'itemView'=>'_view', 'pager'=>array( 'class'=>'ext.infiniteScroll.IasPager', 'rowSelector'=>'.itemdiv', 'listViewId'=>'list-comment', 'header'=>'', 'loaderText'=>'Loading...', 'options'=>array( 'history'=>false, 'triggerPageTreshold'=>2, 'trigger'=>'Load more' ), ) ));Still, this is a nice work. Thanks, Tpoxa!
Pager changes after updating CListView
I also noticed that pager also changed after calling:
$.fn.yiiListView.update('...');Is it a bug? Does anyone know how to resolve this issue?
Rebinding IAS pager after ajax refresh
Following up on my previous questions below, I solved those problems by rebinding IAS pager after ajax update:
$this->widget('zii.widgets.CListView', array( ... (same as before - see my previous comment) 'pager'=>array( ... (same as before) ), 'afterAjaxUpdate'=>"function(id, data) { $.ias({ 'history': false, 'triggerPageTreshold': 2, 'trigger': 'Load more', 'container': '#list-comment > .items', 'item': '.itemdiv', 'pagination': '#list-comment .pager', 'next': '#list-comment .next:not(.disabled):not(.hidden) a', 'loader': 'Loading...' }); }", ));Tpoxa informed me that if we called $.fn.yiiListView.update('...') then we destroyed HTML which IAS was bound to.
Additional info: To completely hide the old pagination buttons, I had to use custom CSS file for CListView:
$this->widget('zii.widgets.CListView', array( 'id'=>'list-comment', 'cssFile'=>'...' (location of CSS file), ... ));In the CSS file I used default CSS file for CListView and modify the pager part:
.list-view .pager { display: none; }Not sure if this is the best way to handle it, but at least that works fine for me. :)
Trigger Button Not Showing
Hello,
I am trying to use this extension in my app, however the trigger button is not showing at all, it only loads more records when I scroll down, and stops after several scrolls according to threshold, then I can't load anymore records because the trigger button is not displayed.
Can anyone tell me why please?
2 infinite scroll caused bugs
Hi guys,
I have 2 infinite scroll in my page, they turn up affect each other. How can I make it work so they work independently?
I modified the infinite scroll js file so i made a reverse infinite scroll plugin, so right now I have 2 class, or plugins(one infinite, one reverse-invite) so they point to 2 js files. However, if I put them into the same page, both of them change to reverse infinite scroll order... It seems that 2 js files affect each other? and when one list is loading, the other one will be loading as well...
How can I solve this?
Great!
That's great extension. Simple and easy to use. Good work, keep it going (Y)
Awesome
Awesome extension!!
Never Quits, but Constantly Reloads Last Page
I'm not sure if there is a setting I am missing. I've looked through the code, and the stop_scroll() is never called. I get multiple repeats of the last page of data.
Any help would be appreciated!
$this->widget('zii.widgets.CListView', [ 'id' => 'postings', 'emptyText' => Yii::t('pdd', 'No {postLevel} yet.', ['{postLevel}' => strtolower(Post::levelName($level + 1, TRUE))]), 'pager' => [ 'class' => 'common.extensions.infiniteScroll.IasPager', 'firstPageLabel' => '<<', 'prevPageLabel' => '<', 'nextPageLabel' => '>', 'lastPageLabel' => '>>', 'header' => '', 'rowSelector' => '.row', 'listViewId' => 'postings', 'loaderText' => 'Loading...', 'options' => ['noneLeft' => TRUE, 'history' => FALSE, 'triggerPageTreshold' => 2 /*sic*/, 'trigger' => 'Load more'], ], 'dataProvider' => $dataProvider, 'viewData' => ['allowExpand' => empty($parent->parentId), 'currentUser' => $currentUser, 'showReply' => $showReply, 'level' => $level, 'purifier' => new CHtmlPurifier() ], 'itemView' => '_threadItem', 'template' => Yii::app()->params['listTemplate'], ] );You should update your source code on github
You should update your source code on github. i was following that, and i had no idea what was going on. Now that i am using code given on this page. its working.
where is pager button?
hi there
the pager is not shown at all.
https://github.com/alisherdavronov/ias.lo
what is the problem?
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.