Ajax search and CGridView - ajax

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'=>' ')); ?>
<?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;
});
");