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"
    <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) {
	var obj = document.getElementById(id);
	txt.value = obj.innerHTML;
	obj.innerHTML = '';	// Clear insider HTML
	if (!addEvent(txt, 'blur', function(){ editoff(id); }, false)) {
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;
  return obj;


function addEvent(obj, evType, fn, useCapture){
	var ret = false;
	if(obj != null){
		if(obj.addEventListener){          // Mozilla, Netscape, Firefox
		else if(obj.attachEvent){         // IE
	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);
		else if(obj.detachEvent){         // IE
			obj.removeEventListener(evType , fn, userCapture);
	return ret;

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

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];
	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);
<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>

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]
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: