Sami's editable cells v.1.0
his plugin will allow you to edit any kind of html elements with a simple text content. It's able to send the value and the ID of the edited element via AJAX request.
A callback function is also available and has as parameters the ID and the value of the element plus the responce from the callback URL if it's set.
The plugin will work even if the editable elements are added dynamically to the parent element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.samis_editable_cells.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function($) {
// Sami's editable cells usage example
$('#table_id').samis_editable_cells({
editable_cell_class: 'editable_cell',
text_input_class: 'classic_text_input',
callback_url: false,
callback_function: function(cell_id, cell_value, calback_url_response){
alert(cell_id+': '+cell_value);
},
});
});
</script>
</head>
<body>
<table id="table_id">
<tr>
<td id="cell11" class="editable_cell">Row 1 cell 1</td>
<td id="cell12" class="editable_cell">Row 1 cell 2</td>
<td id="cell13">Row 1 cell 3 (not editable)</td>
</tr>
<tr>
<td id="cell21" class="editable_cell">Row 2 cell 1</td>
<td id="cell22" class="editable_cell">Row 2 cell 2</td>
<td id="cell23">Row 2 cell 3 (not editable)</td>
</tr>
</table>
</body>
</html>
/**
* Sami's editable cells v.1.0
* Makes the content dynamically editable
* NOTE: requires jQuery
* @param object element - The object that contains the editable elements.
* @param string editable_cell_class - The class of the editable elements. By default editable_cell
* @param string text_input_class - The class or classes of the text inputs. Used for CSS styling.
* @param string callback_url - The url to be called for dynamic update. Cold be empty.
* @param function callback_function - A callback function with parameters: cell value, the cell ID, the response of the callback URL if any;
* @author Samuil Banti - http://samiwell.eu
* @copyright (C) 2015 - Samuil Banti
* @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
* @return NULL
*/
(function( $ ){
$.fn.samis_editable_cells = function( options ) {
var settings = $.extend( {
editable_cell_class: 'editable_cell',
text_input_class: 'editable_cell_input',
callback_url: false,
callback_function: function(cell_id, cell_value, calback_response){
//console.log('cell_id: '+cell_id);
//console.log('cell_value: '+cell_value);
//console.log('calback_response: '+calback_response);
},
}, options);
return this.each(function() {
$(this).on('click', '.'+settings.editable_cell_class, function(){
if(!$(this).hasClass('samis_editing')) {
$(this).addClass('samis_editing');
var input_html = '<input type="text" class="'+settings.text_input_class+'" id="samis_editable_cell" name="'+$(this).attr('id')+'" value="'+$(this).text()+'" />';
$(this).html(input_html);
$('#samis_editable_cell').focus();
}
});
$(this).on('focusout', '#samis_editable_cell', function(){
submit_field($(this));
});
$(this).on('keyup', '#samis_editable_cell', function(e){
if(e.keyCode == 13) {
submit_field($(this));
}
});
});
function submit_field(element) {
element.parent().removeClass('samis_editing');
element.replaceWith(element.val());
if(settings.callback_url.length) {
var url = settings.callback_url+'cell_id='+element.attr('name')+'&cell_value='+element.val();
$.get(url, function(ajax_result){
settings.callback_function(element.attr('name'), element.val(), ajax_result);
});
} else {
settings.callback_function(element.attr('name'), element.val());
}
}
};
})( jQuery );
Download...