Yii: How do I bind yiiGridView.js events to late loaded CGridView

Question

My view consist of a CJuiAutoComplete widget and an initially empty div.

<?php $roomsAvailableUrl = $this->createUrl('getavail');
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name' => 'hotel',
    'source' => $this->createUrl('hotel/get'),
    'options'=>array(
    'select'=>"js:function(event, ui) {
        $.ajax({
            type: 'GET',
            url: '$roomsAvailableUrl',
            dataType: 'html',
            data: {
                'Viroomavail[place_id]': ui.item.id
            },
            success: function(response) {
                $('#rooms').html(response);
            }
        });
    }"
),
)); ?>
<div id="rooms"></div>

When a user makes a choice, then JS-function calls another action by ajax. That action returns a GridView rendered partially depending on the submitted parameter.

public function actionGetAvail()
{
    if (Yii::app()->request->isAjaxRequest)
    {
        $model = new Viroomavail('search');
        $model->unsetAttributes();

        if (isset($_GET['Viroomavail']))
            $model->attributes = $_GET['Viroomavail'];

        $this->renderPartial('_grid_avail', array(
            'model' => $model,
        ));
    }
}

_grid_avail.php:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'roomavail-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'ajaxUpdate'=>'#roomavail-grid',
    'ajaxUrl' => $this->createUrl('getavail'),
    'columns' => array(
       .......
    ),
));

The GridView becomes inserted into the "#rooms" div. I've registered the necessary assets for CGridView in the primary view.

$baseScriptUrl = Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets')).'/gridview';
Yii::app()->getClientScript()->registerCssFile($baseScriptUrl.'/styles.css');
Yii::app()->getClientScript()->registerScriptFile($baseScriptUrl.'/jquery.yiigridview.js');

But I don't know how to bind the events of the yiigridview client script ($.fn.yiiGridView function) to the newly loaded grid. Thus the filter of the grid does not work.

How to get it working? Of course, I can to render the grid initially in the primary view and hide it from a user visually. But I'd like to achieve this in a more elegant way.

Thank you.

Answer 1

You can use afterAjaxUpdate (since your pages are loaded with ajax):

$this->widget('zii.widgets.grid.CGridView', array(
    // ... options ...
    'ajaxUpdate'=>true,
    'afterAjaxUpdate'=>'aFunctionThatWillBeCalled', //
    // ... more options ...
));

You can add the js function like so:

Yii::app()->clientScript->registerScript('some-script-id','function aFunctionThatWillBeCalled(id, data){
    console.log("id is "+id);
    // your jquery code to remember checked rows
}');

check here:

Yii CGridView javascript event on pagination