yii - Dropdownlist in Cgridview column with ajax load to database

Question

I got some issue. So basically I'm trying to make dropdownlist in CGridView column to manage statuses. I want to load onchange to database. Here is grid column:

array(
        'name'=>'status',
        'type'=>'raw',
        'value'=>'CHtml::dropDownlist('status','',array('1'=>'Complete',
                        '2'=>'Paid',
        '3'=>'Not paid'),array(
                                    'class'=>'status',
                                    'options'=>array($data->status=>array('selected'=>'selected')),
                                    'ajax'=>array(
                                        'type' => 'POST',
                                        'url'=>Yii::app()->createUrl('user/orders/status'),                        
                                        'data'=>array('status'=>'js:this.value','order'=>$data->id),
        )
        ));',
        ),

Here is controller action code

public function actionStatus()
    {
    if (isset($_POST['order'])){
        $model=$this->loadModel($_POST['order']);
        $model->status=$_POST['status'];        
    $model->save();
      
    }    
    }

So what is the problem. I'm getting last $data->id and not id for element which dropdown changed. All other works fine.

Maybe it's easy but I can't find any solution.

Answer 1

First: You can avoid all this ugly escaped code if you use a getter in your model class:

public function getStatusDropdown()
{
    $stats = array(
        1 => 'Complete',
        2 => 'Paid',
        3 => 'Not paid',
    );
    return CHtml::dropDownlist('status',$this->status,$stats, array(
        'class'     => 'status',
        'data-id'   => $this->id,
    ));
}

Now add a grid column like

array(
    'name'  => 'Status',
    'type'  => 'raw',
    'value' => '$data->statusDropdown',
),

What's left now is to add some Javascript. Instead of adding a script to each and every button it's much more efficient if you register one snippet to rule them all. You have to listen to the change event of all dropdowns. So you could register a inline snippet right on the page with your gridview like this:

$url = $this->createUrl('user/orders/status');
Yii::app()->clientScript->registerScript('initStatus',
    "$('select.status').on('change','body',function() {
        el = $(this);
        $.ajaxPost('$url', {status: el.val(), id: el.data('id')}
    });",
    CClientScript::POS_READY
);

I've added a body selector to make sure, the event still fires if your GridView is updated through AJAX. You may also want to add a success handler to your ajaxPost() call.

Note, that the above may contain typos, so don't just copy and paste but try to understand how it works. It should get you on the right track.