PDA

View Full Version : getElementById('image1').click() not working in NS

wouter
10-06-2002, 06:57 PM
Hello -- the following code will work in IE but not in NS
and that is the problem I'm currently struggling with. I'm using NS 7.x, NS 6.x and IE 6.x.

<html>
<head>
<title>proxy click() test (W3C DOM)</title>
<script type="text/javascript">
function action1() { return true; }
function action2() { return true; }
function action3() { alert('This Works'); }
</script>
</head>

<body>

<form name="form1" id="form1">
<a href="#"
onmouseout="action1();"
onmouseover="action2();"
onclick = "action3();"
>
<img src="image1.gif" border="0" name="image1" id="image1">
</a></form>

<form>
<a href="#"
onclick = "document.getElementById('image1').click();"
>
<img src="image2.gif" border="0">
</a></form>

</body>
</html>
eak
10-06-2002, 07:26 PM
you are clicking the image not the link around the image. you need to give the link an id or find the parent element of img1
wouter
10-06-2002, 08:05 PM
Tx for the help but after implementation NS refuses the functionality. NS reports Error: document.getElementById("link1").click is not a function


<html>
<head>
<title>proxy click() test (W3C DOM)</title>

<script type="text/javascript">

function action1() { return true; }
function action2() { return true; }
function action3() { alert('This Works'); }

</script>
</head>

<body>
<form name="form1" id="form1">

<a href="#"

onmouseout="action1();"
onmouseover="action2();"
onclick = "action3();"
id = "link1"
>

<img src="image1.gif" border="0" name="image1" id="image1">

</a></form>

<form>

<a href="#"
onclick = "document.getElementById('link1').click();"
>

<img src="image2.gif" border="0">

</a></form>

</body>
</html>
eak
10-06-2002, 10:29 PM
are you sure .click() is a valid method in NS? i have only seen it work with IE.
jkd
10-06-2002, 10:36 PM
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
wouter
10-07-2002, 12:24 PM
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}

Woooooooww --- you knock me down with the obove code I'm afraid I'm not that experienced. Is this the way of dispatching your own event methods. What about collisions with the IE/NS existing click event ?

onother way can I simulate the click in NS through a document link ??

Tx
jkd
10-07-2002, 03:48 PM
That only works in NS6+ and assigns every html element a click() method that creates a generic click event, and dispatches it to the element, like what you would expect a click() method to do.

There are no conflicts with IE, because it can't prototype node (though HTMLElement is undefined in IE - you may want to check for its existance before assigning), and for whatever elements NS has click() for, it shouldn't act any different.
wouter
10-08-2002, 10:45 PM
Thank you ! It worked and its running 100%
ahosang
10-09-2002, 01:05 AM
Yes, impressive Jason!
And the code shows not only Mozilla's good Event handling, but also element prototyping which can be used to mirror most of IE's functions. If you ever wanted to use IE's insertAdjacentHTML function, you could make all elements have that ability like:
<html>
<head>
<title></title>
<script>
HTMLElement.prototype.insertAdjacentHTML=func;
function func() {
var where=arguments[0];
var HTML=arguments[1];
if (where=="AfterBegin") {
this.innerHTML=HTML+this.innerHTML;
return;
} else if (where=="BeforeEnd") {
this.innerHTML+=HTML;
return;
} else if (where=="BeforeBegin") {
var parent=this.parentNode;
var str="";
var txt=document.createElement("I");
txt.innerHTML=HTML;
var temp=parent.insertBefore(txt,this);
var df=document.createDocumentFragment();
for (i=0;i<temp.childNodes.length;i++) {
var n=temp.childNodes[i].cloneNode(true);
df.appendChild(n);
}
for (i=0;i<parent.childNodes.length;i++) {
if (parent.childNodes[i]==temp) {
parent.replaceChild(df, temp);
return;
}
}
} else if (where=="AfterEnd") {
var parent=this.parentNode;
var str="";
var txt=document.createElement("I");
txt.innerHTML=HTML;
if (this.nextSibling) {
var temp=parent.insertBefore(txt,this.nextSibling);
} else {
var temp=parent.appendChild(txt);
}
var df=document.createDocumentFragment();
for (i=0;i<temp.childNodes.length;i++) {
var n=temp.childNodes[i].cloneNode(true);
df.appendChild(n);
}
for (i=0;i<parent.childNodes.length;i++) {
if (parent.childNodes[i]==temp) {
parent.replaceChild(df, temp);
return;
}
}
}
}
</script>

</head>

<body>
Test Page
<form>
<input type="button" value="Test"
onclick="document.getElementById('test').insertAdjacentHTML('AfterEnd','<b> NEW TEXT <i>italic</i> normal</b>')">
</form><br>
<div id="test">hello there</div></body>
</html>

The function is not complete with error checking for arguments etc, but you get the idea. outerHTML is also possible but only as a function call, rather than as a read/write property, so it's not compatible with IE
jkd
10-09-2002, 01:10 AM
Originally posted by ahosang
outerHTML is also possible but only as a function call, rather than as a read/write property, so it's not compatible with IE

HTMLElement.prototype.__defineGetter__('outerHTML', function() {
// stuff to return the outerHTML
});

HTMLElement.prototype.__defineSetter__('outerHTML', function(newValue) {
// stuff to replace current node with DOMParser()-ed newValue docFrag
});

I believe www.webfx.eae.net has an example of this in their IEEmu project.
ahosang
10-09-2002, 01:27 AM
heh-heh, one step ahead as usual jason. I did help with some getter setter stuff on another forum, but don't use it generally, so I totally forgot about it. I didn't get a sight of it on that site you quoted but anyway:
<html>
<head>
<title></title>
<script>
HTMLElement.prototype.__defineGetter__('outerHTML', function() {
var parent=this.parentNode;
var shell=document.createElement("DIV");
var temp=this.cloneNode(true);
shell.appendChild(temp);
return(shell.innerHTML);
})

</script>

</head>

<body>
Test Page
<form>
<input type="button" value="OUTERHTML" onclick="alert(this.outerHTML)">
</form><br>
<div id="test">hello there</div></body>

Haven't done the setter yet

What a browser!
ahosang
10-09-2002, 01:29 AM
p.s.
my technique at the moment as brutal without consideration for finesse. Any ideas to make that outerHTML more elegant??
jkd
10-09-2002, 02:01 AM
http://webfx.eae.net/dhtml/ieemu/htmlmodel.html
ahosang
10-09-2002, 02:17 AM
Thanks Jason.
I used this for the setter:
HTMLElement.prototype.__defineSetter__('outerHTML', function(newVal) {
var parent=this.parentNode;
var temp=document.createElement("DIV");
temp.innerHTML=newVal;
var df=document.createDocumentFragment();
for (i=0;i<temp.childNodes.length;i++) {
var n=temp.childNodes[i].cloneNode(true);
df.appendChild(n);
}
parent.replaceChild(df, this);
})

which is not as efficient I guess. That link was educational regarding the Ranges and contextualFragments. I'll have to look into them another day.
gert cuykens
11-27-2005, 11:35 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="author" content=""/>
<meta name="date" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.php" />

<link rel="shortcut icon" href="bin/favicon.ico">
<link rel="icon" href="bin/favicon.ico">
<script type="text/javascript">
HTMLElement.prototype.click = function()
{
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
</script>
</HEAD>
<BODY>
<div class="status">
text ok </div>

<form id="frm_register" name="frm_register" action="index.php" method="POST" enctype="multipart/form-data">

<label class="l01">login:</label> <input class="i01" name="login" type="text" value="" style= >
<label class="l02">passwd:</label> <input class="i02" name="passwd" type="password" value="" style= >
<label class="l03">first name:</label> <input class="i03" name="firstname" type="text" value="" style= >
<label class="l04">last name:</label> <input class="i04" name="lastname" type="text" value="" style= >
<label class="l05">address:</label> <input class="i05" name="adress" type="text" value="" style= >

<label class="l06">city:</label> <input class="i06" name="city" type="text" value="" style= >
<label class="l07">country:</label> <input class="i07" name="country" type="text" value="" style= >
<label class="l08">birthday:</label> <input class="i08" name="birthday" type="text" value='dd-mm-jjjj' onFocus="this.value=''" >
<label class="l09">gender:</label> <select class="i09" name="gender">
<option value="n/a" >n/a
<option value="female" >female
<option value="male" >male
</select>

<label class="l10">sig:</label> <input class="i10" name="sig" type="text" value='for example PGP:...' onFocus="this.value=''" >
<label class="l11">email:</label> <input class="i11" name="email" type="text" value="" style= >
<label class="l12">phone:</label> <input class="i12" name="phone" type="text" value="" style= >

<img id=pic src="file.php?id=310a7f5b7adab4f799a6ee14e5a5c26f" onclick="document.browseFile.click();"/>
<input id="browseFile" name="browseFile" type="file" style="visibility:hidden;">

<input name="MAX_FILE_SIZE" type="hidden" value="500000">
<input name="frm_register" type="hidden" value="frm_register">
</FORM>
<div class="submit">
<img src="bin/submit.jpg" alt="submit" onclick="document.frm_register.submit()">
<img src="bin/cancel.jpg" alt="cancel" onclick="parent.location='index.php'">
</div>
</body>
</html>

It doesnt work for me :( the filebrowser doesn't popup :confused: