jQuery Plugin: In-Line Text Edit

April 3, 2009 | Demo | Docs | Download
Introduction

Inline-edit gives users the ability to make changes to text blocks and view those changes immedietly. The input from the users is passed to a server side script before returning the parsed data that is display back to the user.

Basic Usage

While no parameters are required, it's recomended you ensure the path to your ajax script is correct, and that you add a hover class so users know to click on section.

$(function(){
	$('.inline-edit').inlineEdit({ajax: '/path/to/ajax-script', hover: 'inline-hover'});
});

which will give you the following affect:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.

-Unkown Author





Source
/**
 * Inline Text Editing 1.2
 * August 22, 2009
 * Corey Hart @ http://www.codenothing.com
 */ 
;(function($){
	$.fn.inlineEdit = function(options){
		return this.each(function(){
			// Settings
			var $obj = $(this), 
				settings = $.extend({
					href: 'ajax.php',
					html: true,
					load: function(){},
					display: '.display',
					form: '.form',
					text: '.text',
					save: '.save',
					cancel: '.cancel',
					loadtxt: 'Loading...',
					hover: 'none-error-404',
					postVar: 'text',
					postData: {}
				}, options||{}, $.metadata ? $obj.metadata() : {});

			// Cache All Selectors
			var $display = $(settings.display, $obj),
				$form = $(settings.form, $obj),
				$text = $(settings.text, $obj),
				$save = $(settings.save, $obj),
				$cancel = $(settings.cancel, $obj);
	
			// Display Actions
			$display.click(function(){
				$display.hide();
				$form.show();
				if (settings.html) 
					$text.val( $display.html() ).focus();
				return false;
			}).hover(function(){ $display.addClass( settings.hover ); }, function(){ $display.removeClass( settings.hover ); });

			// Cancel Actions
			$cancel.click(function(){
				$form.hide();
				$display.show();
				// Remove hover action if stalled
				if ($display.hasClass( settings.hover ))
					$display.removeClass( settings.hover );
				return false;
			});

			// Save Actions
			$save.click(function(){
				settings.postData[settings.postVar] = $text.val();
				$form.hide();
				$display.html(settings.loadtxt).load(settings.href, settings.postData, settings.load).show();
				// Remove hover action if stalled
				if ($display.hasClass( settings.hover ))
					$display.removeClass( settings.hover );
				return false;
			});
		});
	};
})(jQuery);

Download

Latest: inline-edit-1.2.zip
Released: August 22, 2009
-Removed tree dependency, as long as all objects are wrapped within the parent object, they are used
-All objects are now cached
-Load call back function can now be set within settings
-Added postData & postVar into settings for customized POST vars
-When traversing through parents for form tag, the first one found is used
-Removed jQuery Chain Breaking
-Metadata Support Added

Past Release's:
April 3, 2009: inline-edit-1.1.4.zip
April 3, 2009: inline-edit-1.1.3.zip