Ajax按钮在Ajax更新CLIstView后不工作


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

我有一个包含几个元素的CListView。每个元素都有一个ajax链接。

首先ajax链接工作得很好,但当我切换页面在我的CListView然后ajax链接不再工作了!

这是我的控制器:

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

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',
        ),
)); ?>

和项目视图中的ajax链接:

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

更新:当我看到ajax请求时,我可以看到javascript被传递,但没有改变

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

我会使用普通的jQuery。

<<p> 项目视图/strong>
<?php echo CHtml::link(
    "<div class='"like-container'">{$data->like}</div>",
    array('news/like', 'id'=>$data->id, 'type'=>'like'),
    array('class'=>'btn_like')
)) ?>
列表视图

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

注意:我没有测试这个脚本,所以你可能需要稍微调整一下。但它应该给你一个想法。

经验法则:不要过度使用CHtml::ajax*()帮助程序。它们只在非常简单的情况下有用。在大多数情况下,最好使用几行普通的自定义jQuery。

我同意Michael。在这种情况下,使用纯Jquery更好。Yii的方法似乎更复杂。下面是一个可能的解决方案:

视图index . php:

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

视图_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;
    });
控制器

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

基本上,使用live函数,您甚至可以为新元素绑定jquery事件。你失去它们是因为它们正在被动态地破坏和重建。