Edit-in-place

Tanax · 04-15-2009, 03:45 PM

Hiya!

I'm having some troubles with a javascript. It's supposed to be like .. when you click an element that has class "editable", text should be replaced with textarea and allow you to edit the text.

Right now it doesn't save it to a database or anything, I'm just trying to figure out how to accomplish this. And no - I'm not using any js framework.

Looks like this:

Code:

var config = {
	rows: '5',
	cols: '25',
	okButtonText: 'Redigera',
	cancelButtonText: 'Avbryt'
};

window.onload = function  () {
	var pElements = document.getElementsByTagName('*');
	for (var i=0; i < pElements.length; i++) {
		if(pElements[i].className == 'editable')
			inPlaceEditor(pElements[i]);
	};
};

function inPlaceEditor (editableElement) {

	editableElement.onclick = function(e) {
	
		if(this.childNodes[1] == undefined)
		{

			var text = getTextArea(this);
			var buttons = getButtons(text.div);

			this.className = 'not_editable';

		}

		if(buttons)
		{

			var container = this;
			buttons.cancel.onclick = function() {

				container.firstChild.nodeValue = text.origText;
				alert(container.childNodes[1]);

				container.className = 'editable';

			}

			buttons.edit.onclick = function() {

				container.className = 'editable';
				alert('You clicked edit!');

			}


		}

	}

}

function getTextArea(obj)
{

	var origText = obj.firstChild.nodeValue;
	obj.firstChild.nodeValue = '';

	var div = document.createElement("div");
	obj.appendChild(div);

	var textarea = document.createElement("textarea");

	textarea.setAttribute("cols", config.cols);
	textarea.setAttribute("rows", config.rows);
	textarea.value = origText;

	div.appendChild(textarea);

	var text = {
		'origText': origText,
		'textarea': textarea,
		'div': div
	}

	return text;

}

function getButtons(obj)
{

	var br = document.createElement("br");
	var edit = document.createElement("input");
	
	edit.setAttribute("type", "button");
	edit.setAttribute("value", config.okButtonText);

	obj.appendChild(br);
	obj.appendChild(edit);

	var cancel = document.createElement("input");
		
	cancel.setAttribute("type", "button");
	cancel.setAttribute("value", config.cancelButtonText);
		
	obj.appendChild(cancel);

	var buttons = {
		'edit': edit,
		'cancel': cancel
	}

	return buttons;

}

So the problem is, I can click an element, it removes the text, adds a div element, and inside the new div it adds a textarea, br, and 2 input buttons. Right now I'm coding the "cancel" button, which will just cancel the changes you've made and remove the textarea and input buttons.

As you see I'm alerting container.childNodes[1] - which is the div element, but I can't seem to be able to remove it by container.removeChild(container.childNodes[1]); which is really weird?

Also, after I've "edited" an element, it doesn't work to click on that element again to get the textarea again.. how come?

If you need HTML source to be able to help, post and I will post it!
Thanks

allworknoplay · 04-15-2009, 04:20 PM

This sounds like a cool script, I would love to see this working.

Krik might be able to help you, he helped me with some JS issues. If you can post the HTML or link, I would like to see it in action...

Tanax · 04-15-2009, 09:10 PM

Yah, I solved it. The problem that occur is called Event Bubbling.
http://www.quirksmode.org/js/events_order.html

Code:

var config = {
	rows: '5',
	cols: '25',
	okButtonText: 'Redigera',
	cancelButtonText: 'Avbryt'
};

window.onload = function  () {
	var pElements = document.getElementsByTagName('*');
	for (var i=0; i < pElements.length; i++) {
		if(pElements[i].className == 'editable')
			inPlaceEditor(pElements[i]);
	};
};

function inPlaceEditor (editableElement) {

	editableElement.onclick = function(e) {
	
		if(this.childNodes[1] == undefined)
		{

			var text = getTextArea(this);
			var buttons = getButtons(text.div);

			this.className = 'not_editable';

		}

		if(buttons)
		{

			var container = this;
			buttons.cancel.onclick = function(e) {

				container.firstChild.nodeValue = text.origText;
				container.removeChild(container.childNodes[1]);
				container.className = 'editable';

				if (!e) var e = window.event;
                       	e.cancelBubble = true; // IE
                       	if (e.stopPropagation) e.stopPropagation(); // W3C
                       	return false;

			}

			buttons.edit.onclick = function() {

				container.className = 'editable';
				alert('You clicked edit!');

			}


		}

	}

}

function getTextArea(obj)
{

	var origText = obj.firstChild.nodeValue;
	obj.firstChild.nodeValue = '';

	var div = document.createElement("div");
	obj.appendChild(div);

	var textarea = document.createElement("textarea");

	textarea.setAttribute("cols", config.cols);
	textarea.setAttribute("rows", config.rows);
	textarea.value = origText;

	div.appendChild(textarea);

	var text = {
		'origText': origText,
		'textarea': textarea,
		'div': div
	}

	return text;

}

function getButtons(obj)
{

	var br = document.createElement("br");
	var edit = document.createElement("input");
	
	edit.setAttribute("type", "button");
	edit.setAttribute("value", config.okButtonText);

	obj.appendChild(br);
	obj.appendChild(edit);

	var cancel = document.createElement("input");
		
	cancel.setAttribute("type", "button");
	cancel.setAttribute("value", config.cancelButtonText);
		
	obj.appendChild(cancel);

	var buttons = {
		'edit': edit,
		'cancel': cancel
	}

	return buttons;

}

HTML Code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" title="no title" charset="utf-8" />

	<title>index</title>
	<script src="scripts/inplaceEditor.js" type="text/javascript" charset="utf-8"></script>
	
</head>

<body>
<div id="content">
	<h1>Redigeringsbara stycken</h1>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<h2>Nedanstående &auml;r ej redigeringsbart</h2>

	<p class="not_editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>