New Version of Editable Plugin
October 18th, 2007
Alert! Alert! Another boring new release is out blog entry ahead. If you are bored already go ahead and download latest (1.5.0 at time of writing) Jeditable source, minified (recommended) or packed.
More info and should-be-better documentation at project page.
What is new or changed?
- Added placeholder parameter. This can be html on plaintext string. It will be shown when editable element is empty.
- Returned JavaScript is now executed. Allows us to do tricks like returning <script>alert(‘Saved!’)</from> from the save script.
- Hacks which supported old getload and postload parameters are now removed. Use loadurl and loadtype instead.
- Callback should now be given in options hash not as third parameter.
Usage of new or changed options below:
$(".editable").editable("http://www.example.com/save.php", {
placeholder : "Click me to edit",
loadurl : "http://www.example.com/load.php",
loadtype : "POST",
callback: function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
}
});
Thanks
Thanks to Ole Laursen, Dylan Verheul and Mariano Iglesias for providing patches and ideas!
15 Responses to “New Version of Editable Plugin”
Sorry, comments are closed for this article.

October 19th, 2007 at 10:01 AM
thanks for the plugin. great work! i hope i can use it soon.
October 27th, 2007 at 03:48 AM
Hello! Please PLEASE help me solve this issue. I am using JEditable in some divs everything works fine EXCEPT, when using the callback functionality the “Saving….” part does NOT show up AND when i move my mouse and click on another window and the hover back with the mouse over my application that was just edited with jeditable the OLD value that was edited REAPPEARS. But the value edited was saved because its in the DB and if I refresh the page the correct value shows up. HELP! (I’m using PHP)
var \$j = jQuery.noConflict(); \$j(document).ready(function() \{ \$j(’#$element_id’).editable(function(value, settings) \{
October 29th, 2007 at 04:31 PM
RR_QQ : I have bit difficulties understanding nature of your problem. Maybe you can provide me with example page where the problems occurs?
October 29th, 2007 at 08:20 PM
Hell there Mika, unfortunately I cannot provide you with a link since outside users cannot access it.
Im trying to use the submitting to function instead of URL feature.
Well the problem is this in detail:
1. I have a div with a value (lets say the value is 82) that when clicked the jEditable functionality is executed and the value now appears in a text input box.
2. I edit the value (I change it to say 777) and press enter to save.
3. Problem One: The “indicator” label does not appear.
4. The value is saved in the DB and appears in the page in place of the old value as it should.
5. Now imagine you have a totally differnt browswer window (or any other program, say Notepad) open right next to the browser window that contains the jEditable functionality.
6. You click on that other window.
7. Then you decide to go back to the jEditable page so you hover your mouse over it.
8. Problem Two: At this point the new value that you just edited and saved changes back to the old value that was displayed before you made any changes to it. In other words the “777” now turns back to “82”. If I refresh the page the appropriate saved value appears (“777”) and not hte “82” which is now saved in the DB as “777”.
For some reason the code I pasted didn’t show up in its entirety so let me try displaying it one more time. Here it is:
var \$j = jQuery.noConflict(); \$j(document).ready(function() \{ \$j(’#$element_id’).editable(function(value, settings) \{ });
October 29th, 2007 at 08:23 PM
Missing this part int he code at the end: “); });”
Im using jEditable version 1.5.0
November 2nd, 2007 at 10:56 AM
I’m sorry. By just reading this description I cannot help. Would really need to see example page which reproduces the behaviour.
November 5th, 2007 at 07:00 PM
Great script, thank you for providing it.
I just thought I’d suggest some consistency in your naming convention. You refer to the plugin as Editable (this entry’s title), Jeditable (on the project page… “Jedi table” is how that looks to me), and jEditable every once in a while as well (“Projects using jEditable” on project page and a few other times there as well).
My vote would be for jEditable… but tis your plugin. The Jedi Table version is kinda bad IMHO though.
November 8th, 2007 at 06:21 PM
I have used Jeditable in several projects and love it. I have a question. Can you tell me how I can have a multiple select box? And have multiple options already selected?
November 11th, 2007 at 03:25 AM
Hi, I’m having problems when posting data to php. Special characters (&éèà âô…) are screwed up when putting them into my MySQL database. Is there a way to replace special characters with ASCII name entities before posting the data? Any help is welcome. Tnx!
November 12th, 2007 at 12:45 AM
Aaron: I recently changed naming from jEditable to Jeditable. It seems I have forgot to update some pages. Just a matter of personal preference.
November 12th, 2007 at 02:19 AM
found a solution maybe not the most elegant, but it works… var submitdata = {}; var text = input.val(); text = text.replace(/[\340]/g, ”à”); text = text.replace(/[\341]/g, ”á”); text = text.replace(/[\342]/g, ”â”); ...
November 14th, 2007 at 02:56 PM
Joeri: It is an utf-8 problem. Form is submitting utf-8 and your script is expecting something else (or vice versa).
You should convert everything to use utf-8. If this is not possible convert all text to ISO8859 / Latin-1 in save script before you save to database.
Adam: You can use custom input for that. Unfortunately I have not needed such thing myself yet so you have to write it yourself :) Some info on how to write custom inputs: Three Button Editable, Example Source and Custom Input Types for Edit in Place.
November 15th, 2007 at 03:52 PM
This plugin, in all it’s magnificent awesomeness, is so fantastic I find myself thinking of it as JediTable, rather than jEditable or Jeditable.
Thought you should know. Thank you!
November 16th, 2007 at 04:22 AM
phenominal plugin.
couple of issues …unfortunately cannot post example as of yet; but maybe you’ll have an idea how to solve.
1.) when i add buttons to my textarea – they appear to the right instead of below. 2.) the cursor in the textarea is in super-rapid blinking mode (like something is being called repeatedly), instead of normal blinking. it’s not a real big issue, but i wonder why it would be doing that, and not seeming to in your examples.
November 16th, 2007 at 04:30 AM
hmmm code did not showup in the post … not sure how to get that to show up….