Yii: Ajax button not working after an ajax update of a CLIstView

Question

I have a CListView that contains severals elements. Each of those elements has an ajax link.

At first the ajax links are working well, but when I switch pages in my CListView then the ajax links aren't working anymore!

Here's my controller:

$dataProvider = News::model()->listeNews();
$this->renderPartial(
    '_list',
    array('dataProvider' => $dataProvider,),
    false,
    true
);
Yii::app()->end();

The CListView:

<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
    'enablePagination'=>true,
    //don't change the id, used to update the number of news to displau
    'id'=>'list',
    'cssFile' => Yii::app()->theme->baseUrl . '/css/widgets/listview/styles.css',
    'template'=>"{pager}\n{items}\n{pager}",
    'pager' => array(
        'class' => 'PagerSA',
        'cssFile'=>Yii::app()->theme->baseUrl . '/css/widgets/pager.css',
        ),
)); ?>

And the ajax link in the item view:

<?php echo CHtml::ajaxLink(
    '<div class="nb_like" id="nb_like_'.$data->id.'">' . $data->like . '</div>',
    array('news/like','id'=>$data->id, 'type'=>'like'),
    array('update'=>'#nb_like_'.$data->id),
    array('class'=>'btn_like', 'id'=> 'like_' . $data->id)
);?>

Update: When I watch the ajax request I can see the javascript is passed but nothing changes

<script type="text/javascript">
/*<![CDATA[*/
jQuery('#list').yiiListView({'ajaxUpdate':['list'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter','enableHistory':false});
$('body').on('click','#like_2810',function(){jQuery.ajax({'url':'/index-local.php/news/like?id=2810&type=like','cache':false,'success':function(html){jQuery("#nb_like_2810").html(html)}});return false;});
/*]]>*/
</script>

Answer 1

I'd use plain jQuery instead.

item view

<?php echo CHtml::link(
    "<div class=\"like-container\">{$data->like}</div>",
    array('news/like', 'id'=>$data->id, 'type'=>'like'),
    array('class'=>'btn_like')
)) ?>

list view

<?php Yii::app()->clientScript->registerScript('initLikeButtons',<<<JS
    $('body').on('click','.btn_like', function(e) {
        e.preventDefault();
        $.post($(this).attr('href'), function(data) {
            $(this).parents('.like-container').html(data);
        });
    });
JS
, CClientScript::POS_READY); ?>

Note: I didn't test this script, so you may have to tweak it a little. But it should give you the idea.

As a rule of thumb: Don't overuse the CHtml::ajax*() helpers. They are only useful in very simple situations. In most cases you're better off with some lines of plain custom jQuery.

Answer 2

I agree with Michael. In this case, using plain Jquery is better. Yii's way to do this seems more complicated. Here is a possible solution:

view index.php:

<div class="col1"> <?php $this->renderPartial('_ajaxContent', array('model'=>$model)); ?> </div>

view _ajaxContent.php

<p> echo $model->field;  </p>

_new.php (CListView item):

<li>
    <a class="news" href="<?php echo CHtml::normalizeUrl(array("/ajax/id/{$data->id}"))?>"> Link name </a>        
</li>

jquery:

$('.new').live("click", function(e) {
        var href = $(this).attr('href');      
        $.ajax({
            url: href,
            type: "GET",
            dataType: 'text',
            success: function(result){
                var val = $('.col1').html(result);
            }
        });
        return false;
    });

controller

public function actionAjax($id) {
        $data = array();
        $model = News::model()->findByPk($id);
        $this->renderPartial('_ajaxContent', $data, false, true);
    }

Basically, using the live function, you bind the jquery events even for new elements. You lose them cause they are being destroyed and recreated dinnamically.