473,396 Members | 2,002 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,396 software developers and data experts.

HTML elements and events using e4x in FF1.5

I have been trying to do the following. Using JS I want to create an
input element (text box) and attach a event listener. I have done in
in two different ways. The first is using xml elements directly (as in
e4x) and the second using the dom method createElement (which is much
clunkier to write). I'd prefer the former. I've included a stripped
down example below.

It appears that when creating an input element using the line:

var inputBox = <input type="text" size="30" />

that it does not have the same properties as when it is created with:

var inputBox2 = document.createElement("input");

because when an event listener is attached using addEventListener, an
error is generated on the first, but not the second.

My thoughts on this are either
1. The namespace for the input element is not correct and whether input
can have a listener attached. However, my guess is that it would not
show up in the first div box.

2. There's a bug. I have tried this in the nightly trunk build of FF
(Minefeld 3.0a1). If it does seem like a bug, I can file it.

Peter
The code is below:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">

<html>
<head>
<title>Testing events and e4x</title>
<script type="text/javascript e4x=1;">
//<![CDATA[
onload = function()
{
var inputBox = <input type="text" size="30" />

inputBox.addEventListener("focus",function () {alert("hi");},
false);
document.getElementById("out").innerHTML = <form>{inputBox}</form>;
}
//]]>
</script>
</head>
<body>
<h1>Testing events and e4x</h1>
<div id="out"></div>
</body>
</html>

Apr 22 '06 #1
4 1462
I realize that I added a older version of the code. Here's a newer one
that shows the two methods mentioned in the original message:

onload = function()
{
var inputBox = <input type="text" size="30" />
// The following line gives an error
//inputBox.addEventListener("focus",function () {alert("hi");},
false);
document.getElementById("out1").innerHTML = <form>{inputBox}</form>;
var inputBox2 = document.createElement("input");
inputBox2.addEventListener("focus",function () {alert("hi");},
false);
var formBox = document.createElement("form");
formBox.appendChild(inputBox2);
document.getElementById("out2").appendChild(formBo x);

}

Apr 22 '06 #2


pe*********@gmail.com wrote:

It appears that when creating an input element using the line:

var inputBox = <input type="text" size="30" />

that it does not have the same properties as when it is created with:

var inputBox2 = document.createElement("input");

because when an event listener is attached using addEventListener, an
error is generated on the first, but not the second.


There is no magic to E4X XML objects becoming DOM objects just because
you use them with script inside of the browser. That expression
<input type="text" size="30" />
is part of the JavaScript 1.6 core language respectively of the E4X
extension to ECMAScript and yields an XML object of node kind 'element'.
It is not a DOM HTMLInputElement. To parse X(HT)ML into DOM objects you
need to use DOMParser e.g.

var xmlDocument = new DOMParser().parseFromString(
'<input type="text" size="30" xmlns="http://www.w3.org/1999/xhtml" />',
'application/xml'
);
document.body.appendChild(document.importNode(xmlD ocument.documentElement,
true));

or createContextualFragment (which also allows HTML parsing) e.g.

var range = document.createRange();
range.selectNodeContents(document.body);
var documentFragment = range.createContextualFragment(
'<input type="text" size="30">');
document.body.appendChild(documentFragment);
--

Martin Honnen
http://JavaScript.FAQTs.com/
Apr 22 '06 #3
ASM
Martin Honnen a écrit :

or createContextualFragment (which also allows HTML parsing) e.g.

var range = document.createRange();
range.selectNodeContents(document.body);
var documentFragment = range.createContextualFragment(
'<input type="text" size="30">');
document.body.appendChild(documentFragment);


Can I do :

range.createContextualFragment(
'<input type="text" onclick="alert(\'hello\')" size="30">');
--
Stephane Moriaux et son [moins] vieux Mac
Apr 22 '06 #4


ASM wrote:

Can I do :

range.createContextualFragment(
'<input type="text" onclick="alert(\'hello\')" size="30">');


Why not? Of course that function is a proprietary Mozilla extension to
the W3C DOM Level 2 Range API so while you can use it with Mozilla you
would probably rather look at using e.g.
var div = document.createElement('div');
div.innerHTML =
'<input type="text" onclick="alert(\'hello\')" size="30">';
someElement.appendChild(div.firstChild);
to have some cross browser way of parsing a snippet of HTML markup into
a node or several ones.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Apr 23 '06 #5

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

Similar topics

12
by: Kevin Lyons | last post by:
Hello, I am trying to get my select options (courses) passed correctly from the following URL: http://www.dslextreme.com/users/kevinlyons/selectBoxes.html I am having difficulty getting the...
5
by: Richard Cornford | last post by:
I am interested in hearing opinions on the semantic meaning of FORM (elements) in HTML. I have to start of apologising because this question arose in a context that is not applicable to the...
18
by: SwordAngel | last post by:
Hello, I'm looking for a program that converts characters of different encodings (such as EUC-JP, Big5, GB-18030, etc.) into HTML ampersand escape sequences. Anybody knows where I can find one? ...
7
by: mittal.pradeep | last post by:
What is the better table design for a data collection application. 1. Vertical model (pk, attributeName, AttributeValue) 2. Custom columns (pk, custom1, custom2, custom3...custom50) Since the...
3
by: Michal A. Valasek | last post by:
Hello, I want to transform text with HTML markup to plain text. Is there some simple way how to do it? I can surely write my own function, which would simply strip everything with < and >....
2
by: pamelafluente | last post by:
Hi dears, I have a plain HTML page. I want to render it a little interactive. I was thinking to add to it 1 script and events to the elements I want to make interactive. Then, I need to...
8
by: =?Utf-8?B?U2hhd24gUmFtaXJleg==?= | last post by:
I am coming at the world from the standpoint of a veteran ASP Classic developer. I am not clear on the advantages of using the ASP.NET control over standard HTML control. With the ASP.NET...
2
by: Bhasker V Kode | last post by:
Hi, I just wanted to share with everyone a new project that i'm launching today called the Returnable Project ( http://returnable.org ) Returnable serves as a open-platform architectural guide...
2
by: Sarkast | last post by:
Hi there, I have a quick, but apparently quite complicated question. I want my whole site to be unselectable, with a few exceptions. Unfortunatly I am not able to do this. I have a semi...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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
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...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

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.