In Place Editing With Selects

Blog Projects
javascript jeditable jquery
HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

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"
 });


When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.