Three Button Editable

September 21st, 2007

Maybe your get greedy and two buttons in you in place editor is not enough. Maybe your boss says submit and cancel is not enough. He want to have maybe button too. Maybe you want to be as confusing as Excel save dialogue. This is a walkthrough on how to add the third button.

Available methods for creating custom input

When creating custom input type you want to define one or several of these methods. None of them are mandatory.


$.editable.addInputType('example', {
    element : function(settings, original) { },
    content : function(string, settings, original) { },
    buttons : function(settings, original) { },
    submit  : function(settings, original) { },
    plugin  : function(settings, original) { }
});

All methods receive two parameters. Settings is jEditable settings hash. Original is the original element which was clicked. Method content() also receives third parameter string which is the value(s) input should be set to. Inside all methods this represents the form.

For this example we are only interested in buttons method:

buttons(settings, original) should create and attach buttons to form. If this is not provided submit and cancel buttons are added according to settings hash.

Creating custom input

It all starts with adding custom input type called threebutton.

$.editable.addInputType('threebutton', {
});

Right now it does not do much anything. Since no methods are defined plugin will call the default methods. Default buttons method will create submit and cancel buttons if settings.submit and / or settings.cancel is present.

Click me to see what happens!

Add third button

Lets move on and add another button. First we create a button and store it in variable third. We set the value of button to something nice and append it to the form. Note! Inside custom methods this always refers to the form.


 $.editable.addInputType('threebutton', {
     buttons : function(settings, original) {
         var third = $('<input type="button">');
         third.val("I am number three");
         $(this).append(third);
     }
 });

Click me to see what happens!

Oh noes! Submit and cancel buttons are gone. Why is this? Custom buttons method should create all buttons. Now we have two options. One is to code missing buttons ourselves. Since we are lazy lets use shortcut. We will call the default buttons method.


 $.editable.addInputType('threebutton', {
     buttons : function(settings, original) {
         var default_buttons = $.editable.types['defaults'].buttons
         default_buttons.apply(this, [settings, original]);

         var third = $('<input type="button">');
         third.val("I am number three");
         $(this).append(third);
     }
 });

Click me to see what happens!

Final touches

Our custom input is almost ready. We still need to add some action to third input. Lets also make its value configurable via settings hash. We also need to add actual input element. We can use a shortcut and call default function for creating input type of text.


 $.editable.addInputType('threebutton', {
     element : $.editable.types.text.element,
     buttons : function(settings, original) {
         var default_buttons = $.editable.types['defaults'].buttons
         default_buttons.apply(this, [settings, original]);

         var third = $('<input type="button">');
         third.val(settings.third);
         $(this).append(third);

         $(third).click(function() {
             alert("Third button clicked");
         });
     }
 });

Click me to see what happens!

What now?

You need atleast version 1.4.0 of jEditable to make custom inputs. So donwload latest source, minified (recommended) or packed. For more examples you might want to check default custom inputs.

Tagged with jeditable jquery

27 Responses to “Three Button Editable”

john Says:
September 23rd, 2007 at 11:31 AM
This just gets better and better ! I have some problems with modyfying the data before and after edit. I read through other comments but were unable to get any of the examples to work.

Any help would be great fully appreciated.
tanshul Says:
September 25th, 2007 at 04:15 AM
hey there, this is great stuff,i ma new to jquery…and need some help,the examples show the use of jeditable.js with php,how do i pass variables to save.cfm to use that to update my database…please do help.i am having difficulties understanding how we pass the the edited values to another form
Mika Tuupola Says:
September 25th, 2007 at 10:22 AM
tanshul: To submit to save.cfm instead of save.php you would do something like:
```
$(".editable").editable("http://www.example.com/save.cfm", { 
    type    : "textarea",
    submit  : "OK" 
}
```
How Coldfusion accesses and saves database is out of my head. I do not use cfm.

Mika Tuupola Says:
September 25th, 2007 at 11:24 AM

john: You found a bug which prevented old examples from working. It is fixed now. Following example translates tags to newlines before editing.



 $(".editable").editable("http://www.example.com/save.php", {
     type : "textarea",
     submit : "OK",
     data: function(value, settings) {
         var retval = value.replace(/<br[\s\/]?>/gi, '\n');
         return retval;
     }
 });

Slighty more advanced example uses the new custom inputs. It first calls the default function to create textarea. Before edit converts tags to newlines. Before submit converts them back.



 $.editable.addInputType('john', {
     element : function(settings, original) {
         var default_textarea = $.editable.types['textarea'].element
         var input = default_textarea.apply(this, [settings, original]);
         return(input);
     },
     content : function(string, settings, original) { 
         var value = string.replace(/<br[\s\/]?>/gi, '\n');
         $(':input:first', this).val(value);
     },
     submit : function(settings, original) {
         var value = $(':input:first', this).val();
         value = value.replace(/\n/gi, '<br/>');
         $(':input:first', this).val(value);
     }  
 });

tanshul Says:
September 26th, 2007 at 03:43 AM
hey mika ,thnks for the response, i have one more problem,this is my code:
```
$(”.editable2”).editable(“update.cfm”, {
 indicator : “<img src='img/indicator.gif'>”,
 type : ‘textarea’,
 onblur : ‘submit’,
 height : ‘20px’,
 width : ‘50px’,
 tooltip : “Click to edit…” 
});
```
this works fine as well as updates database,but when i click on the editable field,in the first instance it shows the value to be edited…but when i click outside and then click on the field again nothing gets displayed,thus the default value gets lost if no changes are made and this sets my values in the database to zero. please help.
tanshul Says:
September 26th, 2007 at 08:33 AM
hey thnks…i got it…just needed to get rid of the extra spaces…great work
Bill Says:
October 5th, 2007 at 01:12 AM
Thanks for the great plugin! How does one submit and not render the text? As in, save /exactly/ what the user typed and perhaps echo it back. I’m guessing with params data/getload/postload but haven’t figured it.
Mika Tuupola Says:
October 5th, 2007 at 06:13 PM
I am not sure I understand what you want to do but:

If saving script echoes something back this will be displayed in page after submitting. You usually want to echo back what user typed.

If you do not want to display anything after submitting, do not echo anything from saving script.
Bill Says:
October 5th, 2007 at 07:14 PM
Yes, I wasn’t clear. How do I use jeditable such that it does not insert additional html tags into the text?
Bill Says:
October 5th, 2007 at 08:10 PM
More: I see that the text saved server-side, does not have the additional html tags inserted. They are inserted client side. How do I stop this?

BTW: the dynamic select is really handy:)
Mika Tuupola Says:
October 8th, 2007 at 10:57 AM
Jeditable should not insert additional html tags into text. Maybe you can post example link?
Sterling Koch Says:
October 9th, 2007 at 07:32 PM
This is great!

Has anyone else had problems with using the jeditable select boxes? Specifically, when using the ‘data’ option, my text just disappears when clicked on. When using ‘datasource’, it just creates an empty select box. I’m new at this and I’m probably missing something, but so it goes. Here’s an example: http://travishannon.com/test.php
Sterling Koch Says:
October 9th, 2007 at 07:37 PM
Sorry – in that last comment, I meant ‘loadurl’, rather than ‘datasource’.
Bill Says:
October 10th, 2007 at 11:11 PM
Sterling, If I go to travishannon.com/json.php with my browser, I get nothing.

I should get a json formed array, something like this:
{"x":"interested","y":"rejected"}
json.php needs to serve up a json array.
Bill Says:
October 10th, 2007 at 11:14 PM
Sterling, the example array didn’t print out right.
Bill Says:
October 10th, 2007 at 11:41 PM
Mika, dang html chars! About extra html tags. I see behavior in the first live demo example.

user enters: Hi, this is text. server gets: Hi, this is text. server echoes: Hi, this is text. client displays: Hi, this is text.

firefox, ie, but not opera. Seen this closing tag business? Stop it?
Bill Says:
October 10th, 2007 at 11:49 PM
Mika, double dang html chars! I see behavior in live demo.

user enters: Hi, this is text.
server gets: Hi, this is text.
server echo: Hi, this is text.
client displays: Hi, this is text.

firefox, ie, but not opera. Seen this closing tag business? How to stop?
Mika Tuupola Says:
October 11th, 2007 at 06:26 PM
Bill, I see now what you mean. Might be jQuery or browser thing. Adding missing closing tag. Will debug a bit to have better understanding why this happens.
Dave Says:
October 17th, 2007 at 12:53 AM
wonderfull script. Sorry to use this reply for a not button related question. Like a few others iam having a problem with empty cells.

User edits text, deletes text,cell is empty and cant be edited. Iam doing a server side check (save.php) in not allowing empty values. Anything i can do about it from the client side ?
Mika Tuupola Says:
October 17th, 2007 at 01:00 PM
Check latest version from SVN. I am about to release this soon. It introduces new parameter called placeholder. It is text or html string which is diplayed if editable element is empty.
```
$(".editable").editable("http://example.com/save.php", { 
    type   : 'textarea',
    submit : 'OK',
    placeholder : 'Click here to edit.'
});
```
Hope this helps.
Dave Says:
October 17th, 2007 at 01:39 PM
yes works perfectly :)

Cheers
blake8086 Says:
February 26th, 2008 at 01:30 AM
Hi, I’m trying to figure out how to add instructive text to an jEditable that only pops up when the field is in “edit” mode.

For instance, say you have a list of tags: blog interesting jquery javascript

And you click it: [blog interesting jquery javascript] Please separate each tag with a space

What is the best way to do this?
Mika Tuupola Says:
February 28th, 2008 at 11:15 AM
blake8086: I guess easiest way would be to write a plugin (or in other words custom input) for Jeditable. I can write small example code bit later. In meanwhile you could check these two articles: Custom input types for edit in place and Creating Inline Timepicker with JavaScript and jQuery.
Tim Says:
March 3rd, 2008 at 06:39 AM
Great bit of code you’ve put together here—one question: Is it possible to assign an image to the submit or cancel buttons instead of plain text?
Mika Tuupola Says:
March 7th, 2008 at 10:28 AM
Tim: Not at the moment, unless (again) if you write a custom input for that. Support for image buttons has been on TODO list for a while though.
Eirik Says:
April 13th, 2008 at 11:33 PM
I try to add a third button (delete) but when this code shown here does not keep the text editable when a third button is added. I get the three buttons, but no text to edit. That is of course ok if I wanted to delete all the times, but occasionally the plain edit-in-place function is just what I need :)

I tried both Safari & FireFox3. The jeditable version is “Revision: $Id: jquery.jeditable.js 344 2008-03-24 16:02:11Z tuupola”

Have I done something very wrong, or does this apply to others also?
Mika Tuupola Says:
May 10th, 2008 at 12:13 AM
Eirik sorry I missed your comment. It is because at some point I changed the default input to be type hidden. Your problem can be fixed by adding a line:
```
element : $.editable.types.text.element,
```
to custom input. I updated the example above to work with latest version of Jeditable.

Mika Tuupola