Yii GridView Ajax update not working

Question

I have a page that contains CGridView in my app. Users can search data by filling the form and clicking submit button. The search function works, and CGridView successfully updated. The problem is it can't be done through ajax, Yii keep doing it through parameters in URL.

I want to update CGridView through ajax so the URL still nice to look. Here's my code.

View File

<?php
Yii::app()->clientScript->registerScript('search', "
    $('.btn-link').click(function(){
            $('.section').toggle();
            return false;
    });

    $('.section form').submit(function(){
    $('#customer2-grid').yiiGridView('update', {
        data: $(this).serialize()
    });

    return false;
    });
");
?>

<?php echo CHtml::link('Advanced Search','#',array('class'=>'btn-link')); ?>

<div class="section" style="display:none">
    <?php $this->renderPartial('_search',array(
        'model'=>$model,
    )); ?>
</div><!-- search-form -->

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'customer2-grid',
    'dataProvider'=>$model->search(),
    'htmlOptions'=>array('style'=>'font-weight:bold'),
    'filter'=>$model,
    'columns'=>array(

        'NAME',
        'BIRTHDATE',
        'ADDRESS',
        'EMAIL',

        array(
            'header'=>'Action',
                        'class'=>'CButtonColumn',
                        'template' => '{add} {updates}',
                        'buttons' => array(
                                    'add' => array(
                                        'label' => '',
                                        //'imageUrl' => Yii::app()->request->baseUrl.'/images/icon/add.png',
                                        'url' => 'Yii::app()->createUrl("/goods/create/",array("id"=>$data->ID))',
                                        'options'=>array('class'=>'btn btn-info', 'style'=> 'margin-bottom:2px  '),
                                         ),

                                      'updates' => array(
                                          'label' => 'Update Profil',
                                         // 'imageUrl' => Yii::app()->request->baseUrl.'/images/icon/update.png',
                                          'url' => 'Yii::app()->createUrl("/customer/update/",array("id"=>$data->ID))',
                                          'options'=>array('class'=>'btn btn-info'),
                                          ),    


                         ),
        ),
    ),
));
?>

Here's my _search.php code

<div class="form-horizontal">

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



    <div class="form-group">
        <?php echo $form->labelEx($model,'NAME',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'NAME',array('size'=>60,'maxlength'=>128,'class'=>'form-control')); ?>
        </div>
    </div>

    <div class="form-group">
        <?php echo $form->labelEx($model,'BIRTHDATE',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'BIRTHDATE',array('class'=>'form-control')); ?>
        </div>
    </div>

    <div class="form-group">
        <?php echo $form->labelEx($model,'ADDRESS',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'ADDRESS',array('size'=>60,'maxlength'=>512,'class'=>'form-control')); ?>
        </div>
    </div>

    <div class="form-group">
        <?php echo $form->labelEx($model,'EMAIL',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'EMAIL',array('size'=>60,'maxlength'=>64,'class'=>'form-control')); ?>
        </div>
    </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <?php echo CHtml::submitButton('Search', array('class'=>'btn btn-primary')); ?>
        </div>
    </div>


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

</div><!-- search-form -->

Here's my controller code

public function actionAdmin()
    {       
                $this->layout = '//layouts/column1';
        $model=new Customer('search');

        $model->unsetAttributes();  // clear any default values
        if(isset($_GET['Customer']))
            $model->attributes=$_GET['Customer'];

        $this->render('admin',array(
            'model'=>$model,
        ));
    }

The toggle function in the jQuery works just fine but the update function doesn't work. The sorting function in CGridView works as well. What do I miss here?

Is there any restriction in CSS for jQuery/CGridView? I presume there's something wrong with the CSS Selector

EDIT : I've found the problem which unexpectedly lies in layout/main.php I've included three javascript files and one of them causing the error.

<!-- JAVASCRIPTS -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- JQUERY -->
    <script src="<?php echo Yii::app()->request->baseUrl; ?>/css/default/js/jquery/jquery-2.0.3.min.js"></script>
    <!-- JQUERY UI-->
    <script src="<?php echo Yii::app()->request->baseUrl; ?>/css/default/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <!-- BOOTSTRAP -->
    <script src="<?php echo Yii::app()->request->baseUrl; ?>/css/default/bootstrap-dist/js/bootstrap.min.js"></script>

After I discarded the first script, everything's fine. However, I don't have idea why. Maybe somebody can explain why. Any explanation will be appreciated. Sorry if this question going out of topic

Answer 1

ok I try to describe common solution

this code exampling with default gii crud generator

let you have model Customer.php generetad with standard gii module

class Customer extends CActiveRecord 
{
    // ...

    public function search() {
        return new CActiveDataProvider(
            // provider properties
            'criteria' => new CDbCriteria(), // searches and filters
            'sort' => new CSort(), //  ordering
            'pagination' => new CPagination(), //  pagging
        );
    }

    // also there are exists rules for search scneario

    public function rules() {
        return array(
            // ... some other rules

            // rule for scenario search
            array('NAME, BIRTHDATE,ADDRESS, EMAIL', 'safe', 'on'=>'search'),
        );
    }

    // ...
}

next we should describe primitive controller

class CustomerController extends CController 
{
    public function actionIndex()
    {
        // create model with scenario search
        $model = new Customer('search');

        // check for incoming filter requests and apply filter
        if(isset($_GET['Customer']) {
            $model->attributes = $_GET['Customer'];
        }

        $this->render('index', array('model'=>$model);
    }
}

now we have to create simplest view with basic CGridView settings

<?php $this->widget('zii.widgets.grid.CGridView', array(
          'provider' => $model->search(),
          // this property automatically add search field above each columns
          'filter' => $model,

      ));

try this code. and you no need to invent already existing solution by specifying custom search form, of course if you want to have extended search tools, you have to some hard codding