通過Yii中的AJAX動態加載內容？

Question

需要 ：在適當的框架Yii中通過AJAX動態加載內容。 由於是在https://duckduckgo.com/?q=yii中實現的，即向下滾動頁面時，頁面末尾的內容會自動添加。

我所擁有的 ：

視圖：

<!--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>

提示如何實施這項服務？

Answer 1

您需要像無限滾動之類的javascript / jquery插件，請訪問www.infinite-scroll.com ，該插件可將多頁結果轉換為單頁結果，並在twitter或duckduckgo中動態加載。

您可以為頁面直接集成這樣的插件，或者可以在擴展庫中考慮可用於Yii的幾個集成

1. 無限滾動尋呼機（ link ）
2. 無限滾動（ link ）

請注意，這些擴展依賴於分頁變量的存在來加載每個后續頁面。 因此，如果您在視圖中使用CListView ， CGridView或類似的基於CPagination的渲染小部件，它們將最有效。

Answer 2

您可以通過探測滾動位置何時到達屏幕底部來實現此功能而無需使用Yii擴展名或jquery插件。

這就是我的方法。

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

控制器頁面依次查詢“頁面” GET參數，並使用該參數從數據庫中獲取數據。

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

}