Dynamic loading content via AJAX in Yii? - php

Question

Need: Dynamic loading content via AJAX in the proper framework Yii. As it is implemented in https://duckduckgo.com/?q=yii Ie when scrolling down a page, the content at the end of the page is automatically added.
What I have:
View:
<!--MAIN CONTENT AREA-->
<div class="wrap">
<div class="container inner_content">
<div class="row advertisement_row">
<!-- portfolio_block -->
<div class="projects">
<?php
foreach ($models as $one)
{
?>
<div class="span3 element category01 advertisement" data-category="category01">
<div class="hover_img">
<img src="<?php echo Yii::app()->request->baseUrl; ?><?=$one->picture_1?>" alt="" />
</div>
<div class="item_description">
<?php $title = implode(array_slice(explode('<br>',wordwrap($one->title,60,'<br>',false)),0,1))."...";?>
<h6><?=CHtml::link($title, array('view', 'id'=>$one->id))?></h6>
<div class="descr"><?=implode(array_slice(explode('<br>',wordwrap($one->content,240,'<br>',false)),0,1))."..."?></div>
</div>
</div>
<?php
}
?>
<div class="clear"></div>
</div>
<!-- //portfolio_block -->
</div>
</div>
</div>
Prompt how to implement this service?

Answer 1

You can achieve this without using a Yii extension or jquery plugin, by probing for when the scroll position reaches the bottom of the screen.
This is how I did mine.
var page = 0;
function loadnewdata()
{
// do ajax stuff, update data.
var url = '$showlistingUrl'+'/page/'+page;
$.ajax({ url: url,
cache: false,
success: function(data){
var existing_content = $('#listing_container').html();
$('#listing_container').replaceWith('<div id="listing_container">'+existing_content+data+'</div>');
page++;
},
dataType: "html"
});
}
setInterval(
function ()
{
if(($(document).height() - $(window).height() - $(document).scrollTop()) < 500){
loadnewdata();
}
},
500
);
// Run the initial listing load.
loadnewdata();
The controller page in turn queries the 'page' GET parameter and uses this to fetch data from the database.
public function actionShowlisting()
{
$argPage = (int) Yii::app()->request->getQuery('page', 0);
// /////////////////////////////////////////////////////////////////////
// Get a listing of results
// /////////////////////////////////////////////////////////////////////
$dbCriteria = new CDbCriteria;
$dbCriteria->limit = (int) Yii::app()->params['PAGESIZEREC'];
$dbCriteria->offset = $argPage * $dbCriteria->limit;
$listResults = Mymodel::model()->findAll($dbCriteria);
$this->renderPartial('result_list', array('listResults' => $listResults));
}

Answer 2

You need a javascript/jquery plugin like infinite scroll see www.infinite-scroll.com
which help convert multipage result into single page ones, loaded dynamically as in twitter or duckduckgo.
You directly integrate such a plugin for your page or you can consider couple of integrations available for Yii in the extensions library
Infinite Scroll Pager (link)
Infinite Scroll (link)
Note that These extensions rely on presence of pagination variable for loading each subsequent page. So they will work best if you use CListView, CGridView or similar CPagination based rendering widget in your view.