Yii 1.1: Update a part of content using AJAX when select a GridView row


Suppose you want to refresh a form or any content when a single row of CGridView is selected

how to achieve that ?

In your view file modify your cgridview like that

$this->widget('zii.widgets.grid.CGridView', array(
        'id' => 'my-items-grid',
        'dataProvider' => $model->search(),
        'selectableRows' => 1, //permit to select only one row by the time
        'selectionChanged' => 'updateABlock', //javascript function that will be called
        'filter' => $model,
        'columns' => array(

Into the same view just add this (or using javascript register)

<script type="text/javascript">
    function updateABlock(grid_id) {
        var keyId = $.fn.yiiGridView.getSelection(grid_id);
        keyId  = keyId[0]; //above function returns an array with single item, so get the value of the first item
            url: '<?php echo $this->createUrl('PartUpdate'); ?>',
            data: {id: keyId},
            type: 'GET',
            success: function(data) {

In your controller add the appropriate action method

public function actionPartUpdate($id = null) {
        $model = MyModel::model()->findByPk($id);
        if ($model === null)
            throw new CHttpException(404, 'The requested page does not exist.');
        $this->renderPartial('_myModelview', array('model' => $model));

view file _myModelview.php could be contains any code including $model data. Remember to includes you code between this

<div id='part-block'>
//your php-html code

Total 2 comments

#15656 report it
Kostas Apazidis (KonApaz) at 2013/12/05 01:54am
Re: 15655

Hi Arslan

Either you write anonymous function or not is the same thing.

But writing the function in


block is more manipulated on editor like notepad++ or netbeans e.t.c.

In any case thanks for the comment!

#15655 report it
Arslan Butt at 2013/12/05 12:30am
You can use javascript in selectionChanged
        var id  =   $.fn.yiiGridView.getSelection(id);
        $.post('".$this->createAbsoluteUrl('controller/action')."','', function(data) {
                    //to do something 

Leave a comment

Please to leave your comment.

Write new article