Edit in Place breaks in IE

[p3x]

Hi,

I used the script mentioned on quirksmode (http://www.quirksmode.org/dom/cms.html) to make a page that has 'edit in place' functionality. However, I didn't want the complete page to be editable, just the items that had the class set to 'editable'. To be more precise, the <p> tags with that classname.

It all works fine in FF, but in IE it doesn't work, and I can't figure out why. This is the code I used (the lines I added myself are tagged)
O, and BEFORE I added my code it worked fine in IE...hm



// I ADDED THESE 2 FUNCTIONS MYSELF
function getElementFromEvent(e) {
var elm = undefined;
if (!e) e = window.event;
if (e.target) elm = e.target;
else if (e.srcElement) elm = e.srcElement;
if (elm.nodeType == 3) elm = elm.parentNode;
return elm;
}

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}

var editing = false;

if (document.getElementById && document.createElement)
{
var butt = document.createElement('BUTTON');
var buttext = document.createTextNode('Ready!');
butt.appendChild(buttext);
butt.onclick = saveEdit;
}

function catchIt(e) {
if (editing) return;
if (!document.getElementById || !document.createElement) return;
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
while (obj.nodeType != 1)
{
obj = obj.parentNode;
}
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
while (obj.nodeName != 'P' && obj.nodeName != 'HTML')
{
obj = obj.parentNode;
}
if (obj.nodeName == 'HTML') return;
var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
editing = true;
}

function saveEdit()
{
var area = document.getElementsByTagName('TEXTAREA')[0];
var y = document.createElement('P');
var z = area.parentNode;
y.innerHTML = area.value;
z.insertBefore(y,area);
z.removeChild(area);
z.removeChild(document.getElementsByTagName('button')[0]);
editing = false;
}

// I ADDED THIS FUNCTION MYSELF
function init() {
var i;
var tags = document.getElementsByTagName('p');
for (i=0; i < tags.length; i++) {
var tag = tags[i];
if (tag.className == 'editable') {
addEvent(tag, 'click', catchIt, false);
}
}
}

addEvent(window, "load", init);

[Willy Duitt]

http://www.webdeveloper.com/forum/showthread.php?t=70026

[Kor]

and the example at
(http://www.quirksmode.org/dom/cms.html)
has not much to do with your new inserted functions... What in fact you want to do?