<terminal>
/**
*    @Author: Arash Karimzadeh
*    @Email: me@arashkarimzadeh.com
*    @Desciption: Here, I post some of my recent
*    researches. Also you can see my code projects.
*/  
Ajax C # Chrome CMS dateNet Design Patterns includeMany JavaScript jBind Joomla jQuery Plugin rails ror RubyOnRails SQLite xul

+ All tags

Content View Hits : 178093
Bookmark and Share
How to Extend jQuery Editable PDF Print E-mail
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 

  1. $.editableFactory = {
  2.     'text': {
  3.         toEditable: function($this,options){
  4.             $this.append('<input value="'+$this.data('editable.current')+'"/>');
  5.         },
  6.         getValue: function($this,options){
  7.             return $this.children().val();
  8.         }
  9.     },
  10.     'password': {
  11.         toEditable: function($this,options){
  12.             $this.append('<input type="password" value="'+$this.data('editable.current')+'"/>');
  13.         },
  14.         getValue: function($this,options){
  15.             return $this.children().val();
  16.         }
  17.     },
  18.     .....
  19. } 
  

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

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

There are two functions defined for each type:

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

How to create checkbox for Editable?

  1. How to convert to content to checkbox inputs?
    1. toEditable: function($this,options){
    2.             $.each( options.options,
    3.                     function(){
    4.                         $('<input type="checkbox"/>').appendTo($this)
    5.                                     .val(this)
    6.                                     .after('<span>'+this+'</span>');
    7.                     }
    8.                 )
    9.         } 
      

    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 <input type="checkbox"/>, 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.                         $('<input type="checkbox"/>').appendTo($this)
    9.                                     .val(this)
    10.                                     .after('<span>'+this+'</span>');
    11.                     }
    12.                 )
    13.         }
    14.     }
    15. } 
      

    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!)
  2. 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.             ) 
      

    • 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.                         $('<input type="checkbox"/>').appendTo($this)
    9.                                     .val(this)
    10.                                     .after('<span>'+this+'</span>');
    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. } 
      

    This will check the default selected values But still has error on submit.( that's ok for now! ;) )
  3. 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.         } 
      

    • 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.                         $('<input type="checkbox"/>').appendTo($this)
    6.                                     .val(this)
    7.                                     .after('<span>'+this+'</span>');
    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.     } 
      

    Or you can download the file from here.

Tags: JavaScript | jQuery | Plugin

Comments
Add New Search
+/-
Write comment
Name:
Email:
 
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
Please input the anti-spam code that you can read in the image.
handbags   |2010-01-21 05:05:30
chanel handbags for cheap


louis on sale

gucci handbags cheap

Replica for cheap


hair straighteners on sale

ghd hair straighteners for cheap
Reply | Quote
0 1
Anonymous   |2010-02-04 10:13:00
We have the 100% real louis vuitton handbags,you can click our webpage: Louis Vuitton to choose handbags for yourself. Sure,someone want Christian Louboutin,we know the Louboutin shoes are so fashion all around the world,it’s the best women’s shoes,if you are a fashion girl,you can buy discount handbags or manolo blahnik in my online shop.
Reply | Quote
0 0
cv   |2010-02-22 10:30:14
christian louboutin
christian louboutin cheap
christian louboutin sale
christian louboutin discount
christian shoes
christian louboutin shoes
designer handbags
louis vuitton handbags
replica handbags
ugg classic tall
ugg classic short
ugg ultra tall boots
christian louboutin boots
MBT shoes discount
MBT shoes
ugg classic cardy boots
ugg boots
Tory Burch Shoes
Giuseppe Zanotti shoes
ugg boot
Reply | Quote
0 0
louis vuitton   |2010-03-09 04:43:05
Chanel Handbags|Chanel|Gucci|Gucci Handbag|Christian Louboutin|Alexander McQueen|Chloe|Fendi|Giuseppe Zanotti|jimmy choo|Manolo Blahnik|Miu Miu|Salvatore Ferragamo|Tory Burch|UGG Australia|Yves Saint Laurent|LV|Louis Vuitton|Louis Vuitton Handbags|Louis Vuitton Bags|LV Surya Bags|LV Mahina Bags|LV Epi Leather Bags|LV Suhali leather Bags|LV Damier Canvas Bags|LV Nomade Leather Bags|LV Stephen Sprouse Bags|LV Evening Collection Bags|LV Monogram Canvas Bags|LV Monogram Denim Bags|LV Monogram Vernis Bags|LV Monogram Mini Lin Bags|LV Monogram Multicolore Bags|LV Show Fall Winter 2009 bags|LV Show Spring Summer 2009 Bags|Chanel Bags|Chanel 2009 Cluthes Bags|Chanel 2010 New handbags|Chanel 2009 Cambon Bags|Chanel 2009 Denim Bags|Gucci Bags|Gucci 2010 Classic bags|Gucci 2010 Cuise bags|Gucci 2010 Fall winter Bags|Chloe Bags|Marc Jacobs Bags|Prada Bags|Miu Miu Bags|Dior Bags|D& G Bags|Jimmy Choo Bags|Loewe Bags|Gucci|Handbags|Louis Vuitton Handbags|Chanel Handbags|Chloe Handbags|Gucci Handbags|
Reply | Quote
0 0

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
Last Updated on Friday, 30 January 2009 14:10
 
</terminal>