473,378 Members | 1,429 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

DOM error: "node cannot be inserted". Why not?

I am trying to write an editor object, which adds some functionality
and a toolbar to every textarea with a "form-textarea" class. Both FF
and IE generate an error in line 20
(container.appendChild(this.toolbar);) saying "Node cannot be inserted
at the specified point in the hierarchy" code: "3"

I have two questions:
- who would help me with this error
- please provide other feedback about my code, since I want to write a
solid framework

I've pasted all code (including general library functions), to provide
a complete overview.

Any help is greatly appreciated,
Dennis
/********************************** editor code
*******************************/
var Editor = {
version : "1.0 beta",

init : function() {
var textareaNodes = document.getElementsByTagName('textarea');
var thisTextarea, i = 0;
while ((thisTextarea = textareaNodes[i++])) {
if (hasClass(thisTextarea, 'form-textarea')) {
new this.textEditor(thisTextarea);
}
}
},

textEditor : function(textarea) {
this.textarea = textarea;
this.value = textarea.value.replace(/\s+$/g, "");
this.textarea.className = 'editor-textarea';
this.textarea.rows = this.value.split("\n").length;
var container = createNode('div', {
'class' : 'texteditor ' + this.textarea.id}
);
this.toolbar = Editor.textToolbar;
container.appendChild(this.toolbar);
container.appendChild(this.textarea);
this.textarea.parentNode.insertBefore(container, this.textarea);
Editor.detectKey(this.textarea);
this.textarea.focus();
},

detectKey : function(textarea) {
var theHandler = this.handleKey;
if (document.all) textarea.onkeydown = function(e) {
theHandler.call(self, e, textarea);
}
else textarea.onkeypress = function(e) {
theHandler.call(self, e, textarea);
}
},

handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
if (e.keyCode) key = e.keyCode;
else if (e.which) key = e.which - 32;
Editor.growTextarea(textarea);
},

growTextarea : function(textarea) {
var value = textarea.value, newlines = value.split("\n"), i = 0,
rows = 1;
while (newline = newlines[i++]) {
rows += Math.ceil(newline.length / textarea.cols);
}
textarea.rows = rows;
},

textToolbar : function() {
str = createNode('input', {'type' : 'checkbox'});
return str;
}
}

addLoadEvent(function () {
Editor.init();
});

/******************************* library functions
****************************/

function addLoadEvent(func) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldOnload();
func();
}
}
}

function hasClass(el, className) {
return (
el.className &&
el.className.match(new RegExp("\\b" + className + "\\b"))
) ? true : false;
}

function createNode(type, options) {
var el = document.createElement(type);
for (var key in options) {
el.setAttribute(key, options[key]);
}
return el;
}
Jun 27 '08 #1
7 3337
On May 14, 10:52 am, dennis.spreng...@gmail.com wrote:
I am trying to write an editor object, which adds some functionality
and a toolbar to every textarea with a "form-textarea" class. Both FF
and IE generate an error in line 20
(container.appendChild(this.toolbar);) saying "Node cannot be inserted
at the specified point in the hierarchy" code: "3"

I have two questions:
- who would help me with this error
- please provide other feedback about my code, since I want to write a
solid framework

I've pasted all code (including general library functions), to provide
a complete overview.

Any help is greatly appreciated,
Dennis

/********************************** editor code
*******************************/
var Editor = {
version : "1.0 beta",

init : function() {
var textareaNodes = document.getElementsByTagName('textarea');
var thisTextarea, i = 0;
while ((thisTextarea = textareaNodes[i++])) {
I think it is better here to use:

var i = textareaNodes.length;
while (i--) {
thisTextarea = textareaNodes[i];
...
}
Usually I have found that puting assignments inside conditionals is
slower than doing them outside. Also, a plain for loop is probably
more readable for most and just as fast in modern browsers.

if (hasClass(thisTextarea, 'form-textarea')) {
new this.textEditor(thisTextarea);
}
}
},

textEditor : function(textarea) {
this.textarea = textarea;
this.value = textarea.value.replace(/\s+$/g, "");
this.textarea.className = 'editor-textarea';
this.textarea.rows = this.value.split("\n").length;
var container = createNode('div', {
'class' : 'texteditor ' + this.textarea.id}
);
this.toolbar = Editor.textToolbar;
Did you mean to call it?

this.toolbar = Editor.textToolbar();

container.appendChild(this.toolbar);
Presumably you want to append whatever is returned by the call to
Editor.textToolbar, which is an input element.

container.appendChild(this.textarea);
this.textarea.parentNode.insertBefore(container, this.textarea);
Here is your next problem - this.textarea.parentNode is container (the
line above makes it so), so it is effectively:

container.insertBefore(container, this.textarea)

The first argument to insertBefore should be the node to be inserted
(the new child), container can't be inserted into itself.

<URL: http://www.w3.org/TR/DOM-Level-2-Cor...l#ID-952280727 >

--
Rob
Jun 27 '08 #2
de**************@gmail.com meinte:
I am trying to write an editor object, which adds some functionality
and a toolbar to every textarea with a "form-textarea" class. Both FF
and IE generate an error in line 20
(container.appendChild(this.toolbar);) saying "Node cannot be inserted
at the specified point in the hierarchy" code: "3"

I have two questions:
- who would help me with this error
- please provide other feedback about my code, since I want to write a
solid framework

I've pasted all code (including general library functions), to provide
a complete overview.

Any help is greatly appreciated,
Dennis

detectKey : function(textarea) {
var theHandler = this.handleKey;
if (document.all) textarea.onkeydown = function(e) {
theHandler.call(self, e, textarea);
}
else textarea.onkeypress = function(e) {
theHandler.call(self, e, textarea);
}
},
What's this document.all check supposed to do? Lets see: IE knows
document.all, Opera knows it, Safari does, Firefox doesn't (IIRC it does
in quirks mode - but since I've never needed and used document.all I
might be wrong). Anyway, why are you assigning the same listener to
different handlers then?
handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
e = e || window.event; does the same.

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jun 27 '08 #3
On May 14, 4:04 pm, Gregor Kofler wrote:
dennis.spreng...@gmail.com meinte:
<snip>
What's this document.all check supposed to do? Lets see:
IE knows document.all, Opera knows it, Safari does,
Firefox doesn't (IIRC it does in quirks mode - but since
I've never needed and used document.all I might be wrong).
Anyway, why are you assigning the same listener to
different handlers then?
> handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;

e = e || window.event; does the same.
While you are at it, all values of - e - that could result in true for
- e == null - will result in true for - !e -, so whenever the - e ==
null - expression is evaluated the result must always be false, making
the expression redundant and its evaluation a needless runtime
overhead.

Declaring - var e - is pointless as the function's formal parameter -
e - results in the Variable object having an 'e' property by the time
the variable declaration is processed (so it cannot result in the
creation of such a property), and that variable declaration is not
allowed to alter the value of any pre-existing properties of the
Variable object. Making that declaration pointless at best and a
needless runtime overhead at worst.
Jun 27 '08 #4
Gregor Kofler wrote:
de**************@gmail.com meinte:
> handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;

e = e || window.event; does the same.
More efficient, and recommended:

if (!e) e = window.event;
if (e)
{
// ...
}

The `=' operation performed always only adds needless runtime overhead[tm]
if e == true, and the value assigned, if necessary, should be tested for as
well.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
Jun 27 '08 #5
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
Gregor Kofler wrote:
>e = e || window.event; does the same.

More efficient, and recommended:

if (!e) e = window.event;
I wouldn't recommend either over the other.

The minuscule difference in execution time is unlikely to be relevant,
since events are typically caused by user interaction, which dwarves
any such small optimizations.

/L 'Premature optimization is the root of all evil'
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jun 27 '08 #6
On May 15, 2:07 am, Henry <rcornf...@raindrop.co.ukwrote:
On May 14, 4:04 pm, Gregor Kofler wrote:
dennis.spreng...@gmail.com meinte:
<snip>
What's this document.all check supposed to do? Lets see:
IE knows document.all, Opera knows it, Safari does,
Firefox doesn't (IIRC it does in quirks mode - but since
I've never needed and used document.all I might be wrong).
Anyway, why are you assigning the same listener to
different handlers then?
handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
[...]
Declaring - var e - is pointless as the function's formal parameter -
e - results in the Variable object having an 'e' property by the time
the variable declaration is processed (so it cannot result in the
creation of such a property), and that variable declaration is not
allowed to alter the value of any pre-existing properties of the
Variable object. Making that declaration pointless at best and a
needless runtime overhead at worst.
The above explanation is correct for browsers that conform to the
ECMAScript specification, however for old versions of Safari
(somewhere around 1.0 I think) the declaration with var is required in
this particular case due to a browser bug, though I seem to remember
using:

var e = e || window.event;

The declaration is performed before any code is executed, therefore it
should have zero effect on performance after its initial parsing.
--
Rob
Jun 27 '08 #7
RobG wrote:
On May 15, 2:07 am, Henry <rcornf...@raindrop.co.ukwrote:
>On May 14, 4:04 pm, Gregor Kofler wrote:
>>dennis.spreng...@gmail.com meinte:
handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
[...]
>Declaring - var e - is pointless as the function's formal parameter -
e - results in the Variable object having an 'e' property by the time
the variable declaration is processed (so it cannot result in the
creation of such a property), and that variable declaration is not
allowed to alter the value of any pre-existing properties of the
Variable object. Making that declaration pointless at best and a
needless runtime overhead at worst.

The above explanation is correct for browsers that conform to the
ECMAScript specification, however for old versions of Safari
(somewhere around 1.0 I think) the declaration with var is required in
this particular case due to a browser bug, [...]
I don't follow. Do you mean to say that Safari 1.x did not support named
arguments or did not allow to modify argument values? If so, I would simply
remove this UA from considerations because it is clearly FUBAR.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jun 27 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: George Copeland | last post by:
This is a request for help fixing a SQL Server 2000/ADO problem on Windows XP. I would appreciate any useful assistance. PROBLEM: SQL Server access on my machine fails as follows: 1. All of...
1
by: chris yoker | last post by:
hiya, I succesfully return a "nodeList" thru the "xmlDoc.SelectNodes" method. This nodeList is taken from a repetitive, uniform xml doc. I can successfully append a child node at the correct...
3
by: Tim Marsden | last post by:
Hi, When I open my VS2003 solution it looks up "Initializing offline cache", if I end it and reopen its OK. Any suggestions? Tim
8
by: Douglas | last post by:
**** Post for FREE via your newsreader at post.usenet.com **** Hello, The following code does not compile if line 3 is uncommented "using namespace std". I do not understand it. Could...
14
by: W2K3R2admin | last post by:
I cannot open help and support...how do I install it on an existing system? When I click on Help & Support, the error says "Windows cannot open Help and Support because a system service is not...
1
by: sanghamitra das | last post by:
We have developed a web application in which we are using login user(as a array structure) in session variable using HttpContext for some purpose. The session is availabe in the same project...
3
by: masterofzen | last post by:
I've been playing around with this for a while. I bet the answer is pretty obvious, but I'm just not seeing it. I'm also reasonably certain I've run into this problem before. I'm trying to...
8
by: charli | last post by:
Error 3265, "Item cannot be found in the collection corresponding to the requested name or ordinal" code programatically opens a query using ADOX and changed the sql Dim cat As New...
2
by: dowlingm815 | last post by:
I am attempting to create a table with an index. however, i am receiving an error code "3371: Cannot find table or constraint" as soon as it reads the "create index" statement. The code is as...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.