CODEWITHSUNDEEP
phpajaxyii
Alex Malev
Alex Malev

Reputation: 177

Dynamic loading content via AJAX in Yii?

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?

Upvotes: 0

Views: 2016

Answers (2)

crafter
crafter

Reputation: 6296

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));

}

Upvotes: 1

Manquer
Manquer

Reputation: 7647

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

  1. Infinite Scroll Pager (link)
  2. 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.

Upvotes: 1

Related Questions