In Place Editing With Selects

Several people already asked support for selects and possibility to pass CSS class or styles as parameter to jQuery inplace editor. Here they are.

Big thanks goes to Mathias Henze for providing patches and ideas making this release possible!

For those in hurry: test and grab the latest source.

NOTE! JUST FOUND OUT THIS RELEASE HAS PROBLEMS WITH IE. WILL RERELEASE IN FEW HOURS AND KICK MYSELF THREE TIMES FOR NOT DEBUGGING IN WINDOWS!

How to use selects?

You can use selects by giving type parameter value of select. Select is built from JSON encoded array. This array can be given using either data parameter or fetched from external URL given in loadurl parameter. Array keys are values for <option> tag. Array values are text shown in pulldown.

JSON encoded array looks like this:

 {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}

Note the last entry. It is special. With value of ‘selected’ in array you can tell Jeditable which option should be selected by default. Lets make two simple examples. First we pass values for pulldown in data parameter:

 $(".editable").editable("http://www.example.com/save.php", { 
     data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
     type   : "select",
     submit : "OK"
 });

What if you need to generate values for pulldown dynamically? Then you can fetch values from external URL. Lets assume we have following PHP script:

 <?php
 /* http://www.example.com/json.php */
 $array['E'] =  'Letter E'; 
 $array['F'] =  'Letter F'; 
 $array['G'] =  'Letter G'; 
 $array['selected'] =  'F';
 print json_encode($array);
 ?>

Then instead of data parameter we use loadurl:

 $(".editable").editable("http://www.example.com/save.php", { 
     loadurl : "http://www.example.com/json.php",
     type   : "select",
     submit : "OK"
 });

But wait! Theres more. Some people are concerned about extra request made to server. You can also combine these two approaches. Let PHP output JSON encoded array directly into JavaScript code.

  ... some html
 <?php
 $array['E'] =  'Letter E'; 
 $array['F'] =  'Letter F'; 
 $array['G'] =  'Letter G'; 
 $array['selected'] =  'F';
 ?>
 ... some html
 $(".editable").editable("http://www.example.com/save.php", { 
     data   : "<?php print  json_encode($array); ?>",
     type   : "select",
     submit : "OK"
 });

How to style elements?

Starting with this release you can style input element with cssclass and style parameters. First one assumes to be name of a class defined in your CSS. Second one can be any valid style declaration as string. Check the following examples:

 $(".editable").editable("http://www.example.com/save.php", { 
     cssclass : "someclass"
 });

 $(".editable").editable("http://www.example.com/save.php", { 
     loadurl : "http://www.example.com/json.php",
     type    : "select",
     submit  : "OK",
     style   : "display: inline"
 });

Both parameters can have special value of inherit. Setting class to inherit will make form to have same class as it parent. Setting style to inherit will make form to have same style attribute as it parent.

Following example will make word ipsum to be editable with pulldown menu. This pulldown inherits style from <span>. Thus it will be displayed inline.

 ... some html
 Lorem <span class="editable" style="display: inline">ipsum</span> dolor sit amet.
 ... some html
 $(".editable").editable("http://www.example.com/save.php", { 
     loadurl : "http://www.example.com/json.php",
     type    : "select",
     submit  : "OK",
     style   : "inherit"
 });

Passing data to function instead of URL

NOTE! This feature is still somewhat experimental. How it works might change in near future. All feedback is welcome.

Sometimes you want to do more than just POST the edited data to an url. In this case you can pass all data to a function. Inside function this will refer to the original element Jeditable is attached to. Following simple example will log edited content to FireBug console. Nothing
less, nothing more.

 $(".editable").editable(function(value) { 
     console.log(value);
     return(value);
 }, { 
     type    : "textarea"
 });

Changelog

New parameters:

• cssclass : string CSS classname to apply to form element. You can copy from parent using inherit.
• style : string CSS style to apply to form element. You can copy from parent using inherit.
• select : boolean If true text and textarea contents are highlighted by default.
• loadurl :string URL to fetch content before editing. This deprecates old getload and postload parameters.
• loadtype : string GET or POST. Used together with loadurl. Defaults to GET. This deprecates old getload and postload parameters.

Changed parameters:

• type : string In addition to text and textarea this can now also be select. Select values are passed as JSON via loadurl or data.
• url is now internally called target. This is the only mandatory parameter to plugin. In addition to url address it can now be a function name.

Bugs fixed:

• When width and height are set to ‘auto’ plugin now uses calculated pixel values instead of values from css.

• Tweet
• G+

Tagged with: Javascript   Jeditable   Jquery