juiWidget in CListView with ajax pagination

Yii 1.1 General Discussion
1

Hi i wanted to use a CListView where i wanted some JuiWidget in the itemView in my case i wanted to use

CJuiAccordion.

So i added




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

    'panels'=>array(

        'test'=>'some text',

    ),

    'options'=>array(

        'animated'=>'bounceslide',

        'collapsible'=>true,

        'active'=>false,

        'autoHeight'=>false,

    ),

    ));

And the CJuiAccordion works in the first page. But after a Pagination the it doesn’t.

If looked in firebug an see that the rendered id’s after pagination is starting again with #yw0 which is used from the normal rendering.

So i added some id to get some unique id which is not used.




'htmlOptions'=>array('id'=>'makeunique_'.$data->id),

So my genrated ajax code create some unique id’s. But again the js code after an ajax pagination isn’t executed.

So i thought of adding a css class to the accordions code




'htmlOptions'=>array('class'=>'doCJuiAccordion','id'=>'text'.$data->id),

and add some code to the Listview to renew the accordions after each ajax request.




 'afterAjaxUpdate'=>"function (id,data) {

jQuery('.doCJuiAccordion').accordion({'animated':'bounceslide','collapsible':true,'active':false,'autoHeight':false});

    }",

And hooray the accordions are working after an ajax request.

But now my question is there some ‘better’ solution for this?

why isn’t the js code which is used in the clistview and therefore must have some relation to it not executed after an ajax request automaticly?

regards Horizons

2

As a workaround for a similar issue, i.e. paginated item views requiring client side functions on each item, I used this method:




Yii::app()->clientScript->registerScript('script', <<<JS


  function addJSFunctions(){ 

       //the script here can add functions to individual items

       //such as (instead of accordion plugin)

           $(".myitem").click(function(event){

               event.stopPropagation();

               if ($(this).siblings(".itembody").is(":hidden")){

                    $(".itembody").hide("fast");      

                }    

   

                $(this).siblings(".itembody").toggle("fast");  

            });

         //or to add a generic function or process

           $(".myitem").each(function(){});

     }              

     addJSFunctions();

          

JS

      , CClientScript::POS_READY);


//Then as you did above add the afterAjaxUpdate function:

...

'afterAjaxUpdate' => 'function (id,data) {

            addJSFunctions(); 

            }'

...

So every time a new page is called these functions are performed on the new items .