How to Extend jQuery Editable

Written by Arash Karimzadeh

Tuesday, 13 January 2009 16:26

We can extended jQuery Editable plugin by extending its $.editableFactory. currently it supports text, password, textarea and drop-down. Let's see how we can extend it to support checkbox.

You can download the lastest version here and follow these steps to understand how we can extend it.
At this time jQuery Editable 1.1.0 is released and we are using it during our development. I am sure when you are reading this article newer versions of Editable are released and this sample must be compatible with those too.

What is $.editableFactory ?

$.editableFactory is a factory to provide the two functionalities. One for converting the the elements (elements which you've got and converted to editable by $.('selector').editable() ) content to input fields and another for retrieving data from inputs on submit.

the structure of $.editableFactory is

$.editableFactory = {
'text': {
toEditable: function($this,options){
$this.append('data('editable.current')+'"/>');
},
getValue: function($this,options){
return $this.children().val();
}
},
'password': {
toEditable: function($this,options){
$this.append('data('editable.current')+'"/>');
},
getValue: function($this,options){
return $this.children().val();
}
},
.....
}

As you see first you define a type (such as password) which you will pass it to editable later as options.type.

$('div').editable({type:'password'});

There are two functions defined for each type:

toEditable: which will convert element content to input(s)
getValue: for retrieving value(s) from input(s)

How to create checkbox for Editable?

How to convert to content to checkbox inputs?
1. toEditable: function($this,options){
2. $.each( options.options,
3. function(){
4. $('').appendTo($this)
5. .val(this)
6. .after(''+this+'');
7. }
8. )
9. }
toEditable%3A%20function%28%24this%2Coptions%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.each%28%20options.options%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27%3Cinput%20type%3D%22checkbox%22%2F%3E%27%29.appendTo%28%24this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.val%28this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.after%28%27%3Cspan%3E%27%2Bthis%2B%27%3C%2Fspan%3E%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%7D
Let's discuss the above code:
- options contains all parameters you pass to editable such as
  $('div').editable({ type:'password',onSubmit:submitMethod });
  options has options inside which we use to pass anything such as:
  $('div').editable({ type:'password',onSubmit:submitMethod,options:{'val1':'text1','val2':'text2','val3':'text3'} });
- We iterate over options and create , set values for them and also append a span tag to show the value beside the checkbox.
Your $.editableFactory would be like this:
1. $.editableFactory = {
2. 'textarea': { .... },
3. 'password': { .... },
4. 'checkbox': {
5. toEditable: function($this,options){
6. $.each( options.options,
7. function(){
8. $('').appendTo($this)
9. .val(this)
10. .after(''+this+'');
11. }
12. )
13. }
14. }
15. }
%24.editableFactory%20%3D%20%7B%0A%20%20%20%20%27textarea%27%3A%20%7B%20....%20%7D%2C%0A%20%20%20%20%27password%27%3A%20%7B%20....%20%7D%2C%0A%20%20%20%20%27checkbox%27%3A%20%7B%0A%20%20%20%20%20%20%20%20toEditable%3A%20function%28%24this%2Coptions%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.each%28%20options.options%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27%3Cinput%20type%3D%22checkbox%22%2F%3E%27%29.appendTo%28%24this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.val%28this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.after%28%27%3Cspan%3E%27%2Bthis%2B%27%3C%2Fspan%3E%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D
You can change the source code of jQuery Editable and paste the 'checkbox' code, we have developed, inside the $.editableFactory.
Now create a div tag (with text val1,val2) and try something like this and test your code:
$('div').editable({type:'checkbox',options:{'val1':'val1','val2':'val2','val3':'val3'});
As you see your text will change to checkboxes whenever you click on it. But it will raise error on submit.(that's ok for now!)
How to check the selected values?
1. var currentValues = $this.data('editable.current').split(',');
2. $this.children(':checkbox').each(
3. function(){
4. if(currentValues.indexOf($(this).val())>-1)
5. $(this).attr('checked', 'checked');
6. }
7. )
var%20currentValues%20%3D%20%24this.data%28%27editable.current%27%29.split%28%27%2C%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24this.children%28%27%3Acheckbox%27%29.each%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28currentValues.indexOf%28%24%28this%29.val%28%29%29%3E-1%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28this%29.attr%28%27checked%27%2C%20%27checked%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29
- Append this code inside your toEditable.
- $this.data('editable.current') is useful for getting the real content of the element which now is replaced b inputs. it will return val1,val2.
- The first line will convert your val1,val2 text to an array.
- Then it will check each checkbox if the value exist in the array so it must be checked by default.
Your code must be something like this:
1. $.editableFactory = {
2. 'textarea': { .... },
3. 'password': { .... },
4. 'checkbox': {
5. toEditable: function($this,options){
6. $.each( options.options,
7. function(){
8. $('').appendTo($this)
9. .val(this)
10. .after(''+this+'');
11. }
12. )
13. var currentValues = $this.data('editable.current').split(',');
14. $this.children(':checkbox').each(
15. function(){
16. if(currentValues.indexOf($(this).val())>-1)
17. $(this).attr('checked', 'checked');
18. }
19. )
20. }
21. }
22. }
%24.editableFactory%20%3D%20%7B%0A%20%20%20%20%27textarea%27%3A%20%7B%20....%20%7D%2C%0A%20%20%20%20%27password%27%3A%20%7B%20....%20%7D%2C%0A%20%20%20%20%27checkbox%27%3A%20%7B%0A%20%20%20%20%20%20%20%20toEditable%3A%20function%28%24this%2Coptions%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.each%28%20options.options%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27%3Cinput%20type%3D%22checkbox%22%2F%3E%27%29.appendTo%28%24this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.val%28this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.after%28%27%3Cspan%3E%27%2Bthis%2B%27%3C%2Fspan%3E%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20currentValues%20%3D%20%24this.data%28%27editable.current%27%29.split%28%27%2C%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24this.children%28%27%3Acheckbox%27%29.each%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28currentValues.indexOf%28%24%28this%29.val%28%29%29%3E-1%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28this%29.attr%28%27checked%27%2C%20%27checked%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D
This will check the default selected values But still has error on submit.( that's ok for now! ;) )
How to retrieve checked values for submission?
The error was raised when you tried to submit the changes. Because the Editable tried to call getValue method of 'checkbox' which have not defined yet.
1. getValue: function($this,options){
2. var items = [];
3. $(':checkbox', $this).each(
4. function(){
5. if($(this).attr('checked'))
6. items.push($(this).val());
7. }
8. )
9. return items.join(',');
10. }
getValue%3A%20function%28%24this%2Coptions%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20items%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27%3Acheckbox%27%2C%20%24this%29.each%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28%24%28this%29.attr%28%27checked%27%29%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20items.push%28%24%28this%29.val%28%29%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20items.join%28%27%2C%27%29%3B%0A%20%20%20%20%20%20%20%20%7D
- This code will traverse in checkboxes and find the which are checked and retrieve all as a string separated by ','
Finally your code must be like this:
1. 'checkbox': {
2. toEditable: function($this,options){
3. $.each( options.options,
4. function(){
5. $('').appendTo($this)
6. .val(this)
7. .after(''+this+'');
8. }
9. )
10. var currentValues = $this.data('editable.current').split(',');
11. $this.children(':checkbox').each(
12. function(){
13. if(currentValues.indexOf($(this).val())>-1)
14. $(this).attr('checked', 'checked');
15. }
16. )
17. },
18. getValue: function($this,options){
19. var items = [];
20. $(':checkbox', $this).each(
21. function(){
22. if($(this).attr('checked'))
23. items.push($(this).val());
24. }
25. )
26. return items.join(',');
27. }
28. }
%27checkbox%27%3A%20%7B%0A%20%20%20%20%20%20%20%20toEditable%3A%20function%28%24this%2Coptions%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.each%28%20options.options%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27%3Cinput%20type%3D%22checkbox%22%2F%3E%27%29.appendTo%28%24this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.val%28this%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.after%28%27%3Cspan%3E%27%2Bthis%2B%27%3C%2Fspan%3E%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20currentValues%20%3D%20%24this.data%28%27editable.current%27%29.split%28%27%2C%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24this.children%28%27%3Acheckbox%27%29.each%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28currentValues.indexOf%28%24%28this%29.val%28%29%29%3E-1%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28this%29.attr%28%27checked%27%2C%20%27checked%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20getValue%3A%20function%28%24this%2Coptions%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20items%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27%3Acheckbox%27%2C%20%24this%29.each%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%28%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28%24%28this%29.attr%28%27checked%27%29%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20items.push%28%24%28this%29.val%28%29%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20items.join%28%27%2C%27%29%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D
Or you can download the file from here.

Tags: JavaScript | jQuery | Plugin

Last Updated on Monday, 27 September 2010 12:45