Function Defined In Afterajaxupdate Called The Number For Times Clistview Is Updated

Yii 1.1 General Discussion
1

I have an instance of clistview which contains multiple instances of clistview in small views. I need to refresh individual clistview everytime an action is performed. The problem is, whenever I switch from one clistview to the other to perform a certain action, delete for example, it sends request or loads the function n number of times, n being the number of reloads the clistview have gone through with update function. Can anybody point me out where the problem is? I found this which came very close but didn’t solve my problem. My code is as follows: javascript for child clistview update:




function commentPoster()

{

    $('div.update-meta').on('click','a.del', function()

    {

        var commentID = $(this).parent().attr('rel');

        var commentsContainer = $(this).parent().parent().parent().parent().parent().parent().attr('id');

        /**

         * send ajax request to load comment content

         */

        $.ajax({

            url:'<?php echo Yii::app()->createUrl('comments/deleteComment');?>',

            data:{cID:commentID},

            type:'POST',

            success:function(returnData)

            {

                if(returnData *1 == 1)

                {

                    $.fn.yiiListView.update(commentsContainer);

                }

            },

            beforeSend:function(xhr)

            {


            }

        });


    });

}

commentPoster();

and this is how this function is called in clistview:




$this->widget('zii.widgets.CListView', array(

    'dataProvider'=>$comments,

    'afterAjaxUpdate'=>'js:function(id, data){commentPoster();}',

    'ajaxType'=>'GET',

    'itemView'=>'_comments',

    'id'=>'comments_'.$postDetail['id'].'_'.($index+1).'-list',

    'emptyText'=>'',

    'template'=>'{items}{pager}',

    'itemsTagName'=>'ul',

    'itemsCssClass'=>'comments pre-msg'

    )

);

Is it because of the behavior of clistview or I have done something wrong? Can anybody please help me?

2

Hi sirius,

In the current implementation of yours, an on-click event handler is registered every time the list view is ajax-updated … 5 event handlers for 5 ajax-updates, for example. Usually an updating of a list view ("delete" for example) is performed via ajax call, so the list of your on-click event handlers get longer and longer.

BTW, if you want to update something outside the list together with the target list, you can use ‘ajaxUpdate’ property of CListView.

http://www.yiiframework.com/doc/api/1.1/CListView#ajaxUpdate-detail




$this->widget('zii.widgets.CListView', array(

    'dataProvider'=>$comments,

    /* 'afterAjaxUpdate'=>'js:function(id, data){commentPoster();}', */

    'ajaxType'=>'GET',

    'itemView'=>'_comments',

    'id'=>'comments_'.$postDetail['id'].'_'.($index+1).'-list',

    'emptyText'=>'',

    'template'=>'{items}{pager}',

    'itemsTagName'=>'ul',

    'itemsCssClass'=>'comments pre-msg',

    'ajaxUpdate' => "something",

    )

);
3

Softark,

Thanks for your reply. I am now clear why the function is called multiple number of times.

The clistview is updated everytime and it contains elements that need to trigger edit or delete the content. Since the clistview is updated, I understand that the elements for edit and delete will not have any events attached to them since they are generated with ajax, so we need to attach the event manually. The javascript I had written was to bind that event to the edit or delete elements. Also, the code that triggers edit or delete event are my custom code, not generated with Yii.

Can you tell me how to do it?

4

By using jQuery.on(), you can add a preset event handler to the elements in a CListView which will later be changed and/or added by an ajax call, just with a little trick.




$('#some-outer-container').on('click', '#list-view a.del', function() {

    ...

Because this event handler is bound to an unchanged element that is an outer container of the CListView, it will not be damaged by an ajax call which will update the list.

5

Made this finally work. Thanks Softark.