Pass Data to Edit In Place With Function

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.

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.

This can be used for tricks like parsing out <br /> tags from content.

 <p class="editable">
 Lorem Ipsum.<br />
 Dolor sit.<br />
 $(document).ready(function() {
     $(".editable").editable("", {
         type : "textarea",
         submit : "OK",
         data: function(value, settings) {
             var retval = value.replace(/<br[\s\/]?>/gi, '\n');
             return retval;

Data function receives two parameters. Value contains HTML of clicked element. Settings contain all plugin settings. Inside function this refers to the original element.


Bugs fixed:

New features:

Thanks to Nate Cavanaugh and German Rumm for patches and ideas.

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