Ajax search and CGridView

Question

I'm trying to implement an ajax search in my CGridView and I'm not having much luck getting it to work.

My Grid:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'talent-grid',
    'dataProvider'=>$model->searchTalent(),
    'hideHeader'=>true,
    'template' => '{pager}{items}{pager}',
    'pager'=>array('cssFile'=>'/css/pager.css','header' => '',),
    'cssFile'=>'/css/client-grid.css',
    'columns'=>array(
        array(
            'name'=>'talent_id',
            'type'=>'raw',
            'value'=>'$data->getTalentGridRow($data)',
        ),
    ),
)); ?>

Search form:

<?php $form=$this->beginWidget('CActiveForm', array(
    'action'=>Yii::app()->createUrl($this->route),
    'method'=>'get',
)); ?>

    <div class="row">
        <?php echo $form->label($model,'full_name',array('class'=>'inline')); ?>
        <?php echo $form->textField($model,'full_name',array('size'=>60,'maxlength'=>64)); ?>
    </div>
    <div class="row">
        <?php echo $form->label($model,'gender_id',array('class'=>'inline')); ?>
        <?php echo $form->checkBoxList($model, 'gender_id',CHtml::listData(Gender::model()->findAll(), 'gender_id', 'name'),array('separator'=>'&nbsp;&nbsp;&nbsp;')); ?>
        <?php echo $form->error($model,'gender_id'); ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::submitButton('Submit'); ?>
    </div>

<?php $this->endWidget(); ?>

The search model:

public function searchTalent() {
    $criteria=new CDbCriteria;
    $criteria->compare('full_name',$this->full_name,true);

    if ($this->gender_id != "") {
        $criteria->compare('gender_id',$this->gender_id);
    }

    return new CActiveDataProvider($this, array(
        'criteria'=>$criteria,
        'pagination'=>array(
            'pageSize'=>30,
        ),
    ));
}

The javascript:

Yii::app()->clientScript->registerScript('searchTalent', "
$('#search-form form').submit(function(){
    $.fn.yiiGridView.update('talent-list', {
        data: $(this).serialize()
    });
    return false;
});
");

The controller:

public function actionClients() {
    $model = new Talent('search');
    $model->unsetAttributes(); // clear any default values

    if (isset($_GET['Talent'])) {
        $model->attributes = $_GET['Talent'];
    }

    $this->render('clients', array(
        'model' => $model,
        'pages' => 10
    ));
}

the js submit fires, but the grid doesn't get updated. Not sure why.

Answer 1

You have specified the id of gridview in js as talent-list but the original id is talent-grid as specified in widget initialization call . So change the line as

Yii::app()->clientScript->registerScript('searchTalent', "
$('#search-form form').submit(function(){
    $.fn.yiiGridView.update('talent-grid', {
        data: $(this).serialize()
    });
    return false;
});
");