jQuery Plugin: In-Line Text Edit
Introduction
Source
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 UsageWhile 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.3
* April 26, 2010
* Corey Hart @ http://www.codenothing.com
*/
(function( $, undefined ){
$.fn.inlineEdit = function( options ) {
return this.each(function(){
// Settings and local cache
var self = this, $main = $( self ), original,
settings = $.extend({
href: 'ajax.php',
requestType: 'POST',
html: true,
load: undefined,
display: '.display',
form: '.form',
text: '.text',
save: '.save',
cancel: '.cancel',
revert: '.revert',
loadtxt: 'Loading...',
hover: undefined,
postVar: 'text',
postData: {},
postFormat: undefined
}, options || {}, $.metadata ? $main.metadata() : {} ),
// Cache All Selectors
$display = $main.find( settings.display ),
$form = $main.find( settings.form ),
$text = $form.find( settings.text ),
$save = $form.find( settings.save ),
$revert = $form.find( settings.revert ),
$cancel = $form.find( settings.cancel );
// Make sure the plugin only get initialized once
if ( $.data( self, 'inline-edit' ) === true ) {
return;
}
$.data( self, 'inline-edit', true );
// Prevent sending form submission
$form.bind( 'submit.inline-edit', function(){
$save.trigger( 'click.inline-edit' );
return false;
});
// Display Actions
$display.bind( 'click.inline-edit', function(){
$display.hide();
$form.show();
if ( settings.html ) {
if ( original === undefined ) {
original = $display.html();
}
$text.val( original ).focus();
}
else if ( original === undefined ) {
original = $text.val();
}
return false;
})
.bind( 'mouseenter.inline-edit', function(){
$display.addClass( settings.hover );
})
.bind( 'mouseleave.inline-edit', function(){
$display.removeClass( settings.hover );
});
// Add revert handler
$revert.bind( 'click.inline-edit', function(){
$text.val( original || '' ).focus();
return false;
});
// Cancel Actions
$cancel.bind( 'click.inline-edit', function(){
$form.hide();
$display.show();
// Remove hover action if stalled
if ( $display.hasClass( settings.hover ) ) {
$display.removeClass( settings.hover );
}
return false;
});
// Save Actions
$save.bind( 'click.inline-edit', function( event ) {
settings.postData[ settings.postVar ] = $text.val();
$form.hide();
$display.html( settings.loadtxt ).show();
if ( $display.hasClass( settings.hover ) ) {
$display.removeClass( settings.hover );
}
$.ajax({
url: settings.href,
type: settings.requestType,
data: settings.postFormat ?
settings.postFormat.call( $main, event, { settings: settings, postData: settings.postData } ) :
settings.postData,
success: function( response ){
original = undefined;
if ( settings.load ) {
settings.load.call( $display, event, { response: response, settings: settings } );
return;
}
$display.html( response );
}
});
return false;
});
});
};
})( jQuery );
Download
Latest: inline-edit-1.3.zipReleased: April 27, 2010
-Added revert button functionality
-More control added with postFormat, requestType, and new load functionality.
-More control added with postFormat, requestType, and new load functionality.
Past Release's:
August 22, 2009: inline-edit-1.2.zip
April 3, 2009: inline-edit-1.1.4.zip
April 3, 2009: inline-edit-1.1.3.zip
RSS