Joseph Scott

History

A few years back I wrote a Javascript library for editing content in place, that was based on Prototype. It was modeled after the Flickr UI/approach. Nothing amazing, but it worked well enough.

Fast forward a few years and the momentum in the Javascript library field has moved decidedly to jQuery. I’ve been meaning to write a port of the edit in place code to use jQuery, and now I finally have. To help confusion with the original code I’m calling it jQuery Edit In Place, or JEIP for short.

Downloads

Current Version: 0.1.2 (Change Log)
Download: jeip.js

Demo

I’ve put together a very basic demo. Everything is done with templates and CSS classes, so if you don’t like the default look of the demo there are lots of methods for changing it.

Examples

Here’s the most basic example, it enables in line editing for the page element that has an id of content.

$( "#content" ).eip( "save.php" );

After editing is complete and the user clicks on the save button the script sends the url, form_type, element id, original value and new value data via HTTP post to save.php. The returned data is expected to be in JSON object, with the following values: is_error, error_text and html. The is_error field is a boolean, and error_text is used to provide information about the error condition. The html is a string that is used to replace the contents of the edited element.

If you’ve got a larger chunk of text to edit you’ll want to use a textarea form:

$( "#content" ).eip( "save.php", {
    form_type: "textarea"
} );

And for those cases where you just need to provide options, there’s an easy way to do a select form:

    $( "#content" ).eip( "save.php", {
        form_type: "select",
        select_options: {
            blue    : "Blue",
            green   : "Green",
            red     : "Red",
            black   : "Black",
            brown   : "Brown",
            white   : "White"
        }
    } );

For select forms two additional bits of data are passed to the save URL: the original option text and the new option text.

The eip function will also work on multiple elments, so if you select a class it will make all of the elements with that class editable:

    $( ".edit-class" ).eip( "save.php" );

The Save XHR and Response

When the edit form is saved JEIP uses the jQuery AJAX function to send data to the save URL. It send the following fields via HTTP POST:

• url - (string) URL that the edit form was on.
• form_type - (string) The type of edit form that was used (text, textarea, select)
• id - (string) The id of the DOM element that was edited.
• orig_value - (string) The original value of the DOM element that was edited.
• new_value - (string) The new value of the DOM element that was edited.
• data - (object) Optional additional data that was passed along via the original eip call.

For select form edits two additional fields are sent:

• orig_option_text - (string) The original option display text.
• new_option_text - (string) The new option display text.

The response to the XHR needs to be a JSON object with three values:

• is_error - (bool) When true indicates that there was some sort of error when the save URL processed the XHR. Under normal conditions this should be set to false.
• error_text - (string) When is_error is true, this string is used to provide a plain text descriptive of what the error was.
• html - (string) This string is used to replace the old value of the edited DOM element.

Options

There are a number of options that can be provided as part of the second parameter in the eip function. The defaults should fit for most, but if you want to tweak things I’ve tried to provide lots knobs.

• save_on_enter - (bool) When true the save event is triggered when the enter key is pressed. Doesn’t apply for textarea edits.
• cancel_on_esc - (bool) When true the cancel event is triggered when the escape key is pressed.
• focus_edit - (bool) When true give the edit field focus when the edit form is shown.
• select_text - (bool) When true select the text in the edit field.
• edit_event - (string - event) What type of event (usually click or dblclick) to trigger the edit mode.
• select_options - (object) Key/value pairs for the option fields in a select form. The key will be used as the option value and the value from the option will be used as the display option text.
• data - (object) Additional data that will be passed in the XHR to the save URL.
• form_type - (string) What type of edit form to use: text, textarea and select. The default is text.
• size - (int) Value to use for the size attribute on the edit field. By default this is calculated at run time.
• max_size - (int) Maximum value to allow when calculating the size value.
• rows - (int) Value to use for the rows attribute in textarea edit forms. By default this is calculated at run time.
• max_rows - (int) Maximum value to allow when calculating the rows value.
• cols - (int) Value to use for the cols attribute in the textarea edit forms.
• savebutton_text - (string) Text to use on the save button.
• savebutton_class - (string - CSS class) CSS class to use on the save button. The default value is jeip-savebutton.
• cancelbutton_text - (string) Text to use the on the cancel button.
• cancelbutton_class - (string - CSS class) CSS class to use on the cancel button. The default value is jeip-cancelbutton.
• mouseover_class - (string - CSS class) CSS class to apply when the mouse enters an element that is editable. The default value is jeip-mouseover.
• editor_class - (string - CSS class) CSS class to apply to the edit form wrapper. The default value is jeip-editor.
• editfield_class - (string - CSS class) CSS class used on the edit field element. The default value is jeip-editfield.
• saving_text - (string) Text shown while the XHR is waiting for a response. The default value is ‘Saving …’.
• saving_class - (string - CSS class) CSS class used on the saving_text string. The default value is jeip-saving.
• saving - (string - template) Template string used to show the saving_text string.
• start_form - (string - template) Template string used to start the edit form.
• form_buttons - (string - template) Template string used to show the form buttons.
• stop_form - (string - template) Template string used to end the edit form.
• text_form - (string - template) Template string used to show the text edit forms.
• textarea_form - (string - template) Template string used to show the textarea edit forms.
• start_select_form - (string - template) Template string used to start a select edit form.
• select_option_form - (string - template) Template string used to show options elements in select edit forms.
• stop_select_form - (string - template) Template string used to edit a select edit form.
• after_save - (function) Function that is called after the XHR completes. By default it just flashes the element a few times.
• on_error - (function) Function that is called when the save URL returns an error (by setting is_error to true in the return JSON object). By default it calls the alert() function to show the error_text returned from the XHR.