Note: This extension is replaced with X-editable!
This extension joins Yii with Bootstrap Editable plugin allowing in-place editing with Twitter Bootstrap Form and Popover. It includes three widgets and one component that together give you extremely fast and easy way for creating editable interfaces.
widgets ¶
- EditableField - makes editable single attribute of model.
- EditableDetailView - makes editable several attributes shown as name-value table.
- EditableColumn - makes editable one column in GridView
component ¶
- EditableSaver - server-side part for all widgets, allows to easily handle ajax requests submited by editables.
Links ¶
- Live Demo & Documentation
- Watch on github
- Issues
- Bootstrap-editable plugin
- Yii-bootstrap extension
- Bootstrap docs
Requirements ¶
Developed and tested on Yii 1.1.12.
Setup ¶
Setup instructions can be found here.
Feedback ¶
In case of questions please ask on this page or create issue on github.
Your feedback / contribution will be appreciated!
History ¶
Sep 25, 2012
Initial release
Very useful!
I'm looking for something like this for months, thanks a lot!
RE: Very useful!
You are welcome! :)
great extension!
undoubtedly, one of the most useful extension
+10
Great Job
Nice job, it's very useful :)
Graceful degradation.
Hi,
Is there soeo way of making a graceful degradation if user doesn't have javascript?
Thanks.
RE: Graceful degradation
Hi,
I think extension itself has no sense for user without js. Now it just shows text in such cases.
The workaround can be to create link "Edit" that refers to classic form. Link became hidden in onload js, so that it will be visible only for users without js.
Hope this helps!
Great extension!
This makes my apps look richer than before!
Thanks!
CSRF
How can I solve the CSRF if you have enableCsrfValidation'=>true,. Am getting error the CSRF token could not be verified. I usually put 'params'=> array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken) in ajax button to overcome this. help
Super Extension
This extension has made my webapp much more professional looking. Good work.
Do you know if it is possible to extend the available choices (text,textarea, etc) as I am gathering some numeric values and would like to have a JQuery slider in the popup.
RE: CSRF
Hi, bonnie
for CSRF verification you can config additional 'params' as well:
$this->widget('ext.editable.EditableField', array( 'type' => 'text', 'model' => $model, 'attribute' => 'user_name', 'url' => $this->createUrl('user/update'), 'options' => array( 'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken), ), ));RE: Super Extension
hi David,
It maily depends on js plugin. Now I'm strongly refactored it to allow adding new types very easily. It will be possible in nearest 1.2 version.
For particular required types you'd better to create issue on github.
Disabling editable from JavaScript
I'm wondering if it is possible to disable/enable editable functionality for certain rows (or all) from Javascript? I'm using EditableColumn widget.
Two possible scenarios where it might be useful:
Thoughts? Ideas?
RE: Disabling editable from JavaScript
hi, Nick
good features! It's not possible in current version but I think I will add it in next release.
The solution can be to implement "disable" and "enable" api methods of js plugin.
So, to turn table into editable state you will call:
~~~
[javascript]
$('table a').editable("enable");
~~~
CSRF problem on EditableDetailView
How to overcome csrf problem when using EditableDetailView?
Cheers,
Daniel
PS: SUPERBBBB ext!
RE: CSRF problem on EditableDetailView
I think the only way is to add params option to config of each field in detailview:
'options' => array( 'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken), ),In next version I'm going to put params under root config of detailview. Then it will be possible to set it once.
Hope it helps!
RE: CSRF problem on EditableDetailView
Is it something like this?
$this->widget('ext.editable.EditableDetailView', array( 'id' => 'transaction-details', 'data' => $model, 'url' => $this->createUrl('/transaction/editableUpdate'), //common submit url for all editables 'attributes' => array( array( 'name' => 'name', 'options' => array( 'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken), ), ), .....RE: CSRF problem on EditableDetailView
it should be inside editable section:
'attributes' => array( array( 'name' => 'name', 'editable' => array( 'type' => 'text', 'options' => array( 'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken), ), ), ),Very useful!
Thank you, this is exactly what I was looking for.
CSRF problem is solved, more questions.....
Hi Vitalets,
Thank you for your help. CSRF problem is now solved. However, I am still have more questions:
I cannot use optgroup on the select. Any help? it only showed, [object] [Object].
I managed to make new record work. However, since I am not only add new record once, I got difficulty to clear the current value of the model being added. I used option "send" on each field to stop them being updated on every value changed. Only the button action can send the update. In addition, I want to clear the model values. I set the option "value" to "". It works that now, I can create as many records as I want but the last added value is still stay there although it seems the pk is already empty since I can create a new (different) record.
Thank you very much for your help. This extension is superb.
Re: CSRF problem is solved, more questions.....
Still don't know how to implements optgroup...
I solved this, by adding:
'options' => array( 'send' => 'never', ),Now, the EditableDetailView is purely served as the form to create new details. Can be more than one.
New question: I have a view.php with EditableDetailView. On this page, EditableDetailView served as the view/update not for create new data. I have no idea how can I activate and deactivate the field so that if the status is active, editable field is disabled and while the status is inactive, editable field should be activated. Any help on this?
Thanks a lot for your help.
Re: more questions.....
hi Daniel
It's usefull feature and I'm going also to include it in next release.
Thanks!
Can not get it to work :-/
It is not included when I look at the source in the browser.
I did this:
'import'=>array(
'application.models.*', 'application.components.*', 'ext.editable.*' ),in main.php
and tried it in folder extensions/editable as well as extensions/bootstrap-editable.
What should the directory name be in extension directory? And what else am I missing?
Does import also include the JS file?
RE: Can not get it to work :-/
hi, toby78
Extension directory should be editable, so looks your actions are correct.
Please, check don't you miss * in import config?
should be:
'import'=>array( 'application.models.*', 'application.components.*', 'ext.editable.*' ),JS file is included automatically by extension, no need to do it manually.
You can also try
'import'=>array(... 'application.extensions.editable.*' ),because ext alias appeared in later Yii versions.
Hope it helps!
Alias "bootstrap.widgets.TbGridView" is invalid. Make sure it points to an existing directory or file
hi friends i am using this extinction but during run time i am facing this error
"Alias "bootstrap.widgets.TbGridView" is invalid. Make sure it points to an existing directory or file."
if anyone knows about it then plz help me.....
Re: Alias "bootstrap.widgets.TbGridView" is invalid
hi,
please check have you installed bootstrap extension correctly.
Select with group Hack
For those who need to use some select with groups you can apply this hack on
assets/js/bootstrap-editable.js
replace the renderInput function ( line 699 ) by this :
[javascript] renderInput:function () { var deferred = $.Deferred(); this.$input = $(this.settings.template); this.$input.addClass(this.settings.inputclass); this.settings.onSourceReady.call(this, function () { if (typeof this.settings.source === 'object' && this.settings.source != null) { $.each(this.settings.source, $.proxy(function (key, value) { if( typeof key === 'string' ) { var group = $('<optgroup>', { label:key }); $.each(value, $.proxy(function (k, v) { group.append($('<option>', { value:k }).text(v)); })); this.$input.append(group); } else { this.$input.append($('<option>', { value:key }).text(value)); } }, this)); } deferred.resolve(); }, function () { this.errorOnRender = 'Error when loading options'; deferred.resolve(); }); return deferred.promise(); },and setTextByValue ( line 733 )
[javascript] setTextByValue:function () { var deferred = $.Deferred(); this.settings.onSourceReady.call(this, function () { if (typeof this.settings.source === 'object' && this.value ) { var selectedValue = this.value; $.each(this.settings.source, $.proxy(function (key, value) { if( typeof value === 'object' ) { $.each(value, $.proxy(function (k, v) { if( k === selectedValue ) { this.$element.text(v); return true; } },this)); } else { if( key === this.value ) { this.$element.text(value); return true; } } }, this)); } else { //set empty string when key not found in source this.$element.text(''); } deferred.resolve(); }, function () { this.$element.text('Error!'); deferred.resolve(); }); return deferred.promise(); }This will not break anything , just add the possibility to render slect with groups
Note that you maybe need to clean up you published assets folder to get the new file loaded.
Cannot Pass Dynamic Value In Yii Editable
Thanks for the great extension. We are facing a small problem with it though
We are using editable function of yii-booster. The widget is used as follows:
$dataProvider = StaffHours::model()->findAll(); $start = strtotime('12:00am'); $end = strtotime('12:45am'); for( $i = $start; $i <= $end; $i += 900) { $time = date('g:i A', $i); foreach($dataProvider as $data) { $monday = unserialize($data->monday); $this->widget('bootstrap.widgets.TbEditableField', array( 'type' => 'select', 'model' => $data, 'emptytext' => $Monday[$time], 'attribute' => 'monday', 'url' => $this->createUrl('staffhours/updatetime&time='.$time), 'source' => array('Open', 'Close', 'Away'), 'enabled' => true )); } } ?>This widget is in a loop. Every time when this loop runs, the value of this $time variable changes, but into this widget, every time the same value is assigned to this $time. Any pointers to why this is happening and what can be do it pass the dynamic value? Any help is highly appreciated.
Thanks,
hari maliya
Re: Cannot Pass Dynamic Value In Yii Editable
@hari maliya,
could you show the whole loop?
Composite keys for primary key?
Hello,
It seems that it's doesn't work with composite keys for primaryKey.
bug or error of mine ?
I am using EditableColumn.
Nath
Re: Composite keys for primary key?
Hi, yes you are right, please X-editable, it works with composite keys.
Variable types - and new types 'text', 'select', 'date' etc.
I am using this extension - grateful for it! I would like to update it to support variable types per row. This would be based on a type field in the table itself. Also, i'd like to add a color picker for one of the types.
Widgets and AJAX is foreign to me, but I'm trying to figure it out. Does anyone have any advise on where I should look to change the extension. I'm in the EditableField.php, but can't see much in there to work with.
TbEditableField will return Error when loading list when there are only option given for select type
My select options are dynamic, so there are instances that there will be only option. How should i fix this one? Thanks.
problem in editable when used in cgrid view with multiple models
Hi,
im using this widget bootstrap.widgets.TbExtendedGridView.here im getting content from two models with relation like country and state.im able to apply editable on country but not on state.can you let me know how can i do it..
Hi,
Is it possible to have text already selected after click?
The problem thet i have: when i click edit input appear with same value and mouse cursor is after this value... i need to select it and type another...
I would like to have text selected so i can easly just type another value and save...
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.