Yii-Bootstrap-Editable
Yii extension for Bootstrap Editable plugin

EditableField (widget)

Makes editable single attribute of model. Attribute should be safe (e.g. defined in rules() method of model)
It can be one of several types:

1. Text

Example

Source

$this->widget('ext.editable.EditableField', array(
    'type'      => 'text',
    'model'     => $model,
    'attribute' => 'user_name',
    'url'       => $this->createUrl('user/update'),  //url for submit data
));

2. Textarea

Example

Source

$this->widget('ext.editable.EditableField', array(
    'type'      => 'textarea',
    'model'     => $model,
    'attribute' => 'user_comment',
    'url'       => $this->createUrl('user/update'),
    'placement' => 'right'
));

3. Select

Example

Source

$this->widget('ext.editable.EditableField', array(
    'type'      => 'select',
    'model'     => $model,
    'attribute' => 'group_id',
    'url'       => $this->createUrl('user/update'),
    'source'    => CHtml::listData(Group::model()->findAll(), 'group_id', 'group_name')
));

4. Date

Example

Source

$this->widget('ext.editable.EditableField', array(
    'type'          => 'date',
    'model'         => $model,
    'attribute'     => 'user_dob',
    'url'           => $this->createUrl('user/update'),
    'viewformat'    => 'dd/mm/yyyy',
    'placement'     => 'right'
));

EditableDetailView (widget)

Makes editable several attributes of single model, shown as name-value table. Just define editable section inside attribute config. Only safe attributes become editable.

Source (equal for both cases)

$this->widget('ext.editable.EditableDetailView', array(
    'id' => 'user-details',
    'data' => $model,
    'url' => $this->createUrl('user/update'),  //common submit url for all editables
    'attributes'=>array(
        'user_name',
        array(  //select loaded from database
            'name' => 'group_id',
            'editable' => array(
                'type' => 'select',
                'source' => CHtml::listData(Group::model()->findAll(), 'group_id', 'group_name')
             )
        ),
        array(  //select loaded from array
            'name' => 'user_sex',
            'editable' => array(
                'type'    => 'select',
                'source'  => array(0 => 'Male', 1 => 'Female'),
                'prepend' => 'Hidden'
            )
        ),             
        array(  //select loaded from ajax. Text is colored by 'onRender' event
            'name' => 'user_status',
            'value' => Chtml::value($model, 'status.status_text'),
            'editable' => array(
                'type'   => 'select',
                'source' => $this->createUrl('user/getstatuslist'),
                'onRender' => 'js: function(e, edt) {
                      var colors = {1: "green", 2: "blue", 3: "red", 4: "gray"};
                      $(this).css("color", colors[edt.value]);    
                 }',                
            )
        ),
        array(
            'name' => 'user_dob',
            'editable' => array(
                'type' => 'date',
                'viewformat' => 'dd/mm/yyyy'
               )
        ),
        'user_comment',
        'created_at',  //not editable as attribute is not safe
    )
));

For new record you just pass to widget instance of new model, e.g. $model = new User;. Additionally you may create hidden div to show messages and button to save new user (once!):

<div id="msg" class="alert hide"></div>
<button id="save-btn" class="btn btn-primary hide">Save</button>

When you click on button all values are collected, validated and submitted to server (you can find more details here). Onclick handler can be as following:

if($model->isNewRecord) {
    Yii::app()->clientScript->registerScript('new-user', '
    $("#save-btn").show();
    $("#save-btn").click(function() {
        $("#user-details .editable").editable("submit", {
            url: "'.$this->createUrl('user/create').'",
            success: function() {
                $("#msg").removeClass("alert-error").addClass("alert-success")
                         .html("User created!").show();
                $("#save-btn").hide();
            },
            error: function(data) {
                var msg = "";
                if(data.errors) { //validation error
                    $.each(data.errors, function(k, v) { msg += v+"<br>"; });
                } else if(data.responseText) { //ajax error
                    msg = data.responseText;
                }
                $("#msg").removeClass("alert-success").addClass("alert-error")
                         .html(msg).show();         
             }
        });
    });
    ');   
}

Server-side action user/create:

public function actionCreate()
{
    if(Yii::app()->request->isPostRequest) {
        $model = new User;
        $model->attributes = $_POST;
        if($model->save()) {
            echo CJSON::encode(array('id' => $model->primaryKey));
        } else {
            $errors = array_map(function($v){ return join(', ', $v); }, $model->getErrors());
            echo CJSON::encode(array('errors' => $errors));
        }
    } else {
      throw new CHttpException(400, 'Invalid request');  
    }
}

EditableColumn (widget)

Makes editable one column in GridView. Grid stays editable after ajax sorting and pagination.
Parameters are defined in editable section of column config.

Example:

Source

$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'user-grid',
    'itemsCssClass'=>'table table-striped table-bordered table-condensed',
    'dataProvider'=> $dataProvider,
    'columns'=>array(
        array(
           'class' => 'ext.editable.EditableColumn',
           'name' => 'user_name',
           'headerHtmlOptions' => array('style' => 'width: 110px'),
           'editable' => array(
                  'url'        => $this->createUrl('user/update'),
                  'placement'  => 'right',
                  'inputclass' => 'span3',
              )               
        ),
        
        array( 
              'class' => 'ext.editable.EditableColumn',
              'name' => 'user_sex',
              //we need not to set value, it will be auto-taken from source
              'headerHtmlOptions' => array('style' => 'width: 60px'),
              'editable' => array(
                  'type'    => 'select',
                  'url'     => $this->createUrl('user/update'),
                  'source'  => array(0 => 'Male', 1 => 'Female'),
              )
         ),            
        
        array( 
              'class' => 'ext.editable.EditableColumn',
              'name' => 'user_status',
              'value' => 'CHtml::value($data, "status.status_text")', //we need to set value because source is url
              'headerHtmlOptions' => array('style' => 'width: 100px'),
              'editable' => array(
                  'type'     => 'select',
                  'url'      => $this->createUrl('user/update'),
                  'source'   => $this->createUrl('user/getstatuslist'),
                  'onRender' => 'js: function(e, editable) {
                      var colors = {1: "green", 2: "blue", 3: "red", 4: "gray"};
                      $(this).css("color", colors[editable.value]);    
                  }'                       
              )
         ),
      
         array( 
              'class' => 'ext.editable.EditableColumn',
              'name' => 'user_dob',
              'headerHtmlOptions' => array('style' => 'width: 100px'),
              'editable' => array(
                  'type'          => 'date',
                  'viewformat'    => 'dd.mm.yyyy',
                  'url'           => $this->createUrl('user/update'),
                  'placement'     => 'right',
              )
         ), 
         
         array( 
            'class' => 'ext.editable.EditableColumn',
            'name' => 'user_comment',
            'editable' => array(
                'type'      => 'textarea',
                'url'       => $this->createUrl('user/update'),
                'placement' => 'left',
            )
          ),           
    ),
));

EditableSaver (component)

This component is a server-side part for all widgets. It allows to easily handle ajax requests submited by editables.
For instance, all previous demo are submiting to route user/update and action is looks like:

public function actionUpdate()
{
    Yii::import('ext.editable.EditableSaver'); //or you can add import 'ext.editable.*' to config
    $es = new EditableSaver('User');  // 'User' is classname of model to be updated
    $es->update();
}

Inside update() method attribute value is being validated and saved to database column.

Model scenario will be set to "editable" so that you can define attribute rules specifically for in-place editing.
If you want to update additional attributes you can use onBeforeUpdate event:

public function actionUpdate()
{
    $es = new EditableSaver('User');
    $es->onBeforeUpdate = function($event) {
        $event->sender->setAttribute('updated_at', date('Y-m-d H:i:s'));
    };
    $es->update();
}

You should use setAttribute() method of EditableSaver to set attribute values inside events. This allows to update only changed attributes of model (not all).

Events

$event->sender->model->addError('', 'My custom error');

This component does not echo anything to browser because by default editable widgets work in RESTfull way and look only into HTTP response status:
HTTP = 200 means update is ok, otherwise error is shown in widget. If you want to exchange with server-side in more advanced mode (e.g. via JSON) you should catch exceptions thrown by EditableSaver and transform it into JSON response, e.g.

public function actionUpdate()
{
    $es = new EditableSaver('User');
    try {
        $es->update();
    } catch(CException $e) {
        echo CJSON::encode(array('success' => false, 'msg' => $e->getMessage()));
        return;
    }
    echo CJSON::encode(array('success' => true));
}

For that case you also need to define success handler in widget to show error message:

$this->widget('ext.editable.EditableField', array(
    'type'      => 'text',
    'model'     => $model,
    'attribute' => 'user_name',
    'url'       => $this->createUrl('user/update'),
    'success'   => 'js: function(data) {
        if(typeof data == "object" && !data.success) return data.msg;
    }'    
));

Options

These options are passed as configuration array into EditableField widget or into editable section of EditableDetailView and EditableColumn.

Options: javascript methods

'validate'   => 'js: function(value) {
    if($.trim(value) == "") return "This field is required";
}'

'success'   => 'js: function(data) {
    if(typeof data == "object" && !data.success) return data.msg;  
}'

'error'   => 'js: function(xhr) {
    if(xhr.status == 500) return "Internal server error";  
}'

Options: javascript events

'onInit' => 'js: function(e, editable) {
    alert("Initialized with value: " + editable.value);
}'

'onUpdate' => 'js: function(e, editable) {
    alert("new value: " + editable.value);
}'

'onRender' => 'js: function(e, editable) {
    var colors = {1: "green", 2: "blue", 3: "red", 4: "gray"};
    $(this).css("color", colors[editable.value]);    
}'

'onShown' => 'js: function(e, editable) {
   console.log("popover shown with input: ", editable.$input);
}'

'onHidden' => 'js: function(e, editable) {
   console.log("popover is hidden.");
}'