Inline Edit – A jQuery Plugin

This jQuery plugin aims to make it easy to make any text content into an editable form that posts changes to your application via AJAX.

Overview

Why another inline editing jquery plugin?

In short: Customising existing options looked like more work than building my own.

After looking at a number of plugins, none of them had the user interface that I desired (simple, no buttons etc) and they all interferred with the page layout when activated making content jump all over the place.

The major aims of this project are: 1. ease of use for developers 1. minimal disruption to the page layout on activation 1. minimal controls

This plugin is written in CoffeeScript, then translated/compiled into Javascript. I prefer taking contributions in CoffeeScript, but javascript is fine also.

Requirements

jQuery 1.4+

Installation

Copy jquery.editinline.js (or jquery.editinline.js.coffee if you have an asset pipeline) into a public directory in your application.

Usage

For the element that you want:

$('#pageTitle').editInline(options) 

where options is an array of options:

  • url => url for the AJAX to post the result to
  • method => the http method to use e.g. PUT, POST
  • color => the color of the edit link and text editing field outline
  • fieldName => the name of the field/parameter that the data is sent back with (takes preceedence over the name attribute of the DOM element)

Download

You can find the code at the plugin’s github repository. Or if you want a direct link:

Licence

Choose your poison 🙂 – this code is dual licensed under MIT or GPLv2 .

Contribution

I welcome contributions, so please say hello.