Jeditable
WYSIWYG Inline Edit with Jeditable
06 September 2008
Latest custom input for Jeditable uses jWYSIWYG editor by Juan M Martinez. This code has been almost ready for a while. This week I finally had time to fix some outstanding FireFox bugs.
If you are interested in writing your own Jeditable custom inputs read the introduction. You might also be interested in MarkItUp! custom input which is similar to jWYSIWYG input.
To test see the working demo and then download the source.
Usage
First include all needed JavaScript and CSS in your HTML.
<script src="jquery.js"" type="text/javascript"></script> <script src="jquery.wysiwyg.js" type="text/javascript"></script> <script src="jquery.jeditable.js" type="text/javascript"></script> <script src="jquery.jeditable.wysiwyg.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css">
Now you can use input type wysiwyg. Set onblur to ignore. Otherwise clicking menubar will cause editing to quit. You should also include atleast submit and cancel parameters. All jWYSIWYG settings can be passed using wysiwyg parameter. Check documentation from Juan’s webpage.
PUT Support for Jeditable
03 September 2008
Until now Jeditable only supported submitting edited data using POST method. This was against REST principles. POST should be used for creating new objects. PUT should be used for updating existing objects.
Most browsers do not natively support PUT method. Jeditable does it Rails way by using POST method but submitting additional variable called _method with value put.
Jeditable now has basic unit tests covering most configuration parameters. If you find any failing tests drop me a line. Download latest as source, minified or packed.
Changes Since 1.6.0
Submit method can now be POST (default) or PUT.
$(".editable").editable("http://www.example.com/save.php", { method : "PUT" });
Jeditable and TinyMCE
22 July 2008
I have been working with Sam Curren lately improving Jeditable custom input API. At the same time Sam has been working with his TinyMCE custom input.
Inline editing with TinyMCE has been requested several times in mailinglists and forums. After MarkItUp! and WYSIWYG (beta) it is now third content editor plugin for Jeditable.
TinyMCE input needs Jeditable 1.6.0 to work. Download it as source, minified or packed.
Changes Since 1.5.0
You can now call function when onblur is triggered.
$(".editable").editable("http://www.example.com/save.php", { onblur : function(value, settings) { console.log(this); console.log(value); console.log(settings); } });
MarkItUp! for Jeditable
08 April 2008
In the heels of autogrow textarea comes next custom input for Jeditable. This time we will use markItUp! universal markup editor by Jay Salvat.
If you are not familiar with Jeditable custom inputs read the introduction. Also see autogrow and timepicker tutorials.
If you are just looking for the code download it here.
Creating custom input
Throughout the tutorial we will be using following code to trigger Jeditable. Note variable called markitupHTML . It holds configuration of used markItUp! tagset. In this example I use slightly modified HTML tagset. For more information on tagsets see markItUp! documentation.
$(".edit").editable("http://www.example.com/save.php", { type : "markitup", submit : 'OK', cancel : 'Cancel', tooltip : "Click to edit.", onblur : "ignore", markitup : markitupHTML });
Again we start by adding custom input type called markitup.
Autogrow Textarea for Jeditable
04 April 2008
Previously i showed you how to create inline timepicker for Jeditable. This time we will create autogrowing textarea. This custom input will adjust its height while you type. Code uses excellent Autogrow jQuery plugin by Chrys Bader.
If this is your first encounter with Jeditable custom inputs you might want to read an introduction to them.
If you are just looking for the code download it here.
Creating custom input
Throughout the tutorial we will be using following code to trigger Jeditable.
$(".edit").editable("http://www.example.com/save.php", { type : "autogrow", submit : 'OK', cancel : 'Cancel', tooltip : "Click to edit.", onblur : "ignore", autogrow : { lineHeight : 16, maxHeight : 512 } });
We start by adding custom input type called autogrow.
Creating Inline Timepicker with JavaScript and jQuery
16 February 2008
Inline editing is not only limited to text and textarea inputs. In this tutorial you will learn how to make inline timepicker with JavaScript. We will be using the usual tools: jQuery and Jeditable.
Before continuing you might be interested in reading introduction to custom input types for Jeditable.
Available methods for creating custom input
When creating custom input type you want to define one or several of following 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) { }, reset : 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 input should be set to. Inside all methods this represents the form.
For this example we will be using three methods.
New Version of Editable Plugin
18 October 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!
Three Button Editable
21 September 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) { }, reset : 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.
Custom input types for edit in place
07 August 2007
I have received many feature requests lately. Most of them have been worth of adding. People have different needs. But I have been worrying about Jeditable becoming feature creep. Thats why I figured out another aproach.
For those in hurry. Check the custom input types demo for some proof on concept inputs.
Write your own input types
Sometimes you need multiple selects. Your form might need special third button which is not submit or cancel. Sometimes you want to use some other plugin such as Date Picker for editing.
There is no point adding separate parameter for all of these. Code would become bloated. Thus I have been working on enabling other developers to add new input types. Think of it as plugins for in place editor plugin.
Pass Data to Edit In Place With Function
06 April 2007
Small update to jQuery eip plugin. Data parameter is now more flexible. Bug with callback function launching too early is fixed.
In earlier versions you could use functions for two things. To submit edited data to function which takes full control of Ajax request. You could also define optional callback function. This function is called after submitting edited data. Starting from 1.3.1 release you can also use functions as data property. Instead of passing static string you can pass function which generates the data.
In Place Edit With Callback
22 March 2007
jQuery in place edit is now close to have all features it needs. Add some more and it will become feature creep. Most features are configurable. You can even get full control on Ajax request. Just write your own function for submitting and post to this function instead of URL. Smartypants!.
As usual, download latest source or test online.
Using callback function
Now you can define optional callback function. This function is called after form has been submitted. Callback function receives two parameters. Value contains submitted form content. Settings contain all plugin settings. Inside function this refers to the original element.
$(".editable").editable("http://www.example.com/save.php", { type : "textarea", submit : "OK", }, function(value, settings) { console.log(this); console.log(value); console.log(settings); });
In Place Editing With Selects
13 March 2007
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.
Jeditable 1.1.1 - Minor Bugfixes
15 February 2007
Latest release of javascript in place editor plugin has some minor bugfixes. In near future postload and getload parameters will be deprecated in favour of loadurl and loadmethod.
Fixed bugs are:
- Cancel button now works even when onblur is set to ignore. Thanks to Thomas Mann for providing the patch.
- Plugin does not break the chain even when attached to nonexistent element. In other words it returns this instead of false in case of failure.
As usual test and download plugin.
Jeditable 1.1.0 - Compatible with jQuery 1.1
17 January 2007
New release adds inplace editing capabilities for recently released jQuery 1.1.
In addition to compatibility changes new or improved options are:
- data : string Alternative to postload and getload. Instead of fetching content from external resource it can be passed as parameter.
- cancel : string Value for optional cancel button.
- submit : string Empty value does not default to ‘OK’ anymore. If you want to have submit button you have to define this option.
As usual test and download plugin.
Edit In Place With Effects
30 December 2006
Graphical effects can be used to improve user experience.
People have been asking me to add configurable effects into Jeditable. I believe in writing reusable code. This also means I do not want to force people use anything specific including graphical effects I happen to like. I believe people should be able to use any 3rd party effects they want to use.
Luckily jQuery makes this easy to implement. Just add effects you want to same element selector you make editable.
For example you want to change background colour to yellow when move mouse over editable area:
$(document).ready(function() { $(".editable").mouseover(function() { $(this).css('background-color', '#ffffd3'); }); $(".editable").mouseout(function() { $(this).css('background-color', '#fff'); }); $(".editable").editable("http://www.example.com/save.php", { indicator : "<img src='img/indicator.gif'>", type : "textarea", tooltip : "Click to edit." }); });
Jeditable 1.0.0 - Doubleclick to Edit
21 December 2006
First stable version of jQuery Javascript in place editor is out of oven. Existing api will be frozen. I will add new features in near future.
I only added one bugfix and one feature since last release candidate. These are:
- Width and height setting of auto now works with all input types.
- New configurable option submit controls value of submit button. Empty value means no submit button.
Textareas still have default submit button with value ‘OK’.Scrap that. I do not want force users to have submit button when using textareas. Besides when onblur=submit the submit button is not even needed.
New submit option is used as follows:
$(document).ready(function() { $(".edit").editable("http://www.example.com/save.php", { type : 'text', submit : 'Save changes' }); });
As always test and download plugin.
Jeditable 1.0.0RC1 - Configurable OnBlur Event
31 October 2006
Thanks to community support Jeditable now has additional features and new bugfixes. First stable release is almost there.
New release of jQuery in place editable plugin fixes following bugs:
- When textarea size was set to auto width and height were incorrectly set. To be exact px was missing from the property.
- Also when using auto size the width and height was only calculated once. Thus if you edited content more than once, textarea size did not change according to new content.
- All instances of $ are now changed to jQuery.
- When attaching Jeditable to nonexistent element elem has no properties error is no more thrown.
Thanks to Nagy Attila Gabor and Gary for providing patches!
Additionally new configuration parameter onblur was added. Possible values and corresponding behaviors are:
- onblur : ‘cancel’ Clicking outside editable area cancels changes. Clicking OK button submits changes.
- onblur : submit’ Clicking outside editable area submits changes.
- onblur : ‘ignore’ Click outside editable area is ignored. Pressing ESC cancels changes. Clicking OK button submits changes.
As always test new features and download plugin.
Jeditable 0.9.2 - Ideas From EditInPlace
11 October 2006
While looking at Joseph Scott’s EditInPlace I realized Jeditable missed one important thing. Possibility to configure event which starts editing. Default is click.
This is now implemented via options[event]. You can use any jQuery events such as click, dblclick, mouseover or mousemove. Out of these example event the first two are naturally the most usefull ones. Additionally some internal changes were made in order to follow jQuery plugin authoring guidelines better.
Download latest version of jQuery in place editor plugin while its hot!
Jeditable 0.9.1 - Now With Tooltips and Autosizing
30 September 2006
Just released next version of jQuery inplace editor plugin. This version has two improvements. Textarea input element can be automatically sized to match the size of edited element. This is also default behaviour. Additionally an optional tooltip via title attribute is supported.
Jeditable 0.9.0 - In Place Editor for jQuery
29 September 2006
It has been a while since I last was really excited about something. Few days ago I found jQuery.
jQuery states itself as New Wave JavaScript. I have had experience with prototype and script.aculo.us. Both are great libraries. However I never felt comfortable them. I just used them.
With first impression about jQuery’s syntax is bit confusing:
$(document).ready(function() { $("a[@href*=/foo/bar]").click(function() { alert('Click.'); }); });
After reading that jQuery’s main developer John Resig is also a Perl coder it all makes sense. I assume the fact that I did code Perl “back in the days” makes me feel comfortable also with jQuery.
