Geeks With Blogs
Remo Gkardi blog
I have been thinking of this for long and I did many stuff yet I couldnt find a suitable script for such a process with a light weight script, so I will start checking if this going to work tho

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<script type="text/javascript">
var txt;

function edit(id) {
	txt=addElement('textarea','editor','edit','divedit','container');
	var obj = document.getElementById(id);
	txt.value = obj.innerHTML;
	obj.innerHTML = '';	// Clear insider HTML
	obj.appendChild(txt);
	if (!addEvent(txt, 'blur', function(){ editoff(id); }, false)) {
		alert('huh');
		}
	txt.focus();
	}
function editoff(id) {
	var obj = document.getElementById(id);
	val= txt.value;
	obj.innerHTML = val;
	}

function doNothing(){
	txt=null;		//dummy 
	 };

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

	}

function addEvent(obj, evType, fn, useCapture){
	var ret = false;
	if(obj != null){
		if(obj.addEventListener){          // Mozilla, Netscape, Firefox
			obj.addEventListener(evType,fn,useCapture);
			ret=true;
			}
		else if(obj.attachEvent){         // IE
			obj.attachEvent('on'+evType,fn);
			ret=true;
			}
	}
	return ret;
	}
	
function removeEvent(obj, evType, fn, userCapture){
	var ret = false;
	if(obj != null){
		if(obj.removeEventListener){          // Mozilla, Netscape, Firefox
			obj.removeEventListener(evType , fn, userCapture);
			ret=true;
			}
		else if(obj.detachEvent){         // IE
			obj.removeEventListener(evType , fn, userCapture);
			ret=true;
			}
		}
	return ret;
	}

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {	el.style.display = 'none';	}
		else {		el.style.display = '';	}
	}

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 (var i = 0; i < EditObj.length; i++) {
		elem = EditObj[i].getAttribute('id');
		addEvent(EditObj[i],'dblclick', function() {edit(EditObj[i].getAttribute('id'))}, false);
		}
	}
</script>
</head>
<body onLoad="Init();">
<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>
</body>
</html>

while still I am faceing a trouble in getting a hold of the script to work but for the last one always which is
as it seems the function of the Init is not saving the varibles of the function to which will be the event handler for "dblclick".
I have been on and off with this struggle of this [In line edit] functionality but most of what I have seen is too heavey for my application.
PS. of course the functionality of save isn't added yet but sure I will whenever this work in the 1st place!
Related links [some of it helps]
joseph.randomnetworks.com
bossmanmedia.com
24ways.org
yvoschaap.com
dynamicdrive.com
Any idea/suggetions are most welcome Posted on Saturday, October 21, 2006 3:52 AM Javascript | Back to top


Comments on this post: Edit inline Ajax

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


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