Geeks With Blogs
Remo Gkardi blog
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<style type="text/css">
#container {width:500px;height:1000px;}
.editable{width:495px; height:200px;border:solid 1px black}
.editor {width:99%; height:195px;background-Color:#ffffcc;}
</style>
<title>By Class inline Editor</title>
<script type="text/javascript">
// Author: Remo Gkardi <meynot@hotmail.com>
// WWW: http://www.palsteen.com/
//
// Simple Inline Editing with simple saving via element ID
// You are free to modify (in fact, you must at least for security purposes)!
// I suggest you use session or add some more element for security purposes
// to 'function SendData'

// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
action = 'update.php'; // script where the data shall be saved, each element will be sent by its ID
method = 'post'; // method of submiting the data to the 'action'
addEvent(window,"load",Init);

function addEvent( obj, type, fn )	{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}

function removeEvent( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
}


function editON() {
var id = this.getAttribute('id');
var obj = document.getElementById(id);
removeEvent(obj, 'dblclick',editON)
var val = obj.innerHTML;
obj.innerHTML ='';
var txt=addElement('textarea','editor','edit_'+id,'divedit',id);
txt.value = val;
addEvent(document.getElementById('edit_'+id),'blur', function(){ editOFF(id); });
document.getElementById('edit_'+id).focus();
}
function editOFF(id) {
var val= document.getElementById('edit_'+id).value;
var obj=document.getElementById(id);
removeEvent(document.getElementById('edit_'+id),'blur',function(){ editOFF(id); });
// Send [val] via include to another script to update/save!
SendData(id, val);
//
addEvent(obj,"dblclick", editON);
obj.innerHTML = val;
}

function SendData(id, val) {
if(window.XMLHttpRequest){
var xmlReq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');
}
var elem = '';
elem = id+"="+val;
xmlReq.open(method, action, true);
xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlReq.send(elem);
alert(elem); // This line is kept for debug the data been sent (you MUST remove this line in final code)
}

function addElement(oType, oClass, oID, oName, oParent) {
obj = document.createElement(oType);
obj.style.display='none';
obj.id = oID;
document.getElementById(oParent).appendChild(obj);
obj.className = oClass;
obj.style.display='block';
return obj;

}

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
function Init() {
var EditObj = getElementsByClassName(document,'div', 'editable');
var elem;
for(i in EditObj) {
addEvent(EditObj[i],"dblclick", editON);
}
}

</script>
</head>
<body>
<div id="container">
<div id="a1" class="editable">Hello World</div>
<div id="a2" class="editable">Hello World</div>
<div id="a3" class="editable">Hello World</div>
<div id="a4" class="editable">Hello World</div>
</div>
<input type="text">

</body>
</html>
Online demo of the above example Posted on Sunday, October 29, 2006 8:50 PM Javascript | Back to top


Comments on this post: Inline by class editor

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Remo? Gkardi | Powered by: GeeksWithBlogs.net