html/JavaScript/DOM problems under IE

[Radu Ciurlea]

Hello. I want to make the browser show some suggestions under a text
box (like the To: field in webmail interfaces that displays addresses
in the addressbook). Basically whenever something changes in the text
box (i.e. an onKeyUp even occurs) I check to see what words in the
"address book" match the word in the box. After that I fill a <div>
with links that onClick update the text box contents. Here's how it's
written:

in search.html:

[stuff removed]
<script type="text/javascript">
// potential choices go here(nevermind the language :)
var vect = new Array();
vect[0] = "asa";
vect[1] = "acasa";
vect[2] = "ana are mere";
vect[3] = "android";
vect[4] = "analgezic" ;
vect[5] = "asin";
vect[6] = "as";
vect[7] = "accelerato r";
vect[8] = "amanet";
vect[9] = "alegro";
vect[10] = "altu";
vect[11] = "altceva";
</script>
<script type="text/javascript" src="search.js" ></script>

[more stuff removed]

<form name="f1" id="f1">
<input class="box" type="text" id="nume" style="width : 200px;"
onkeyup="makeSu ggestions()">
<input class="box" type="submit" name="submit" id="submit"
value="Submit">
</form>
</p>
<div id="choices">
<b>Suggestion s</b>
</div>

[the rest is irrelevant]

and in search.js:

// this function adds the links. i tell it where to add them, what text
they should have and what onClick action

function adda(obj,txt,ac tion)
{
if(typeof obj == "string")
obj = document.getEle mentById(obj);
newlnk = document.create Element('a');
newtext = document.create TextNode(txt);
newlnk.setAttri bute('href','#' );
newlnk.setAttri bute('onClick', action);
newlnk.appendCh ild(newtext);
obj.appendChild (newlnk);
}

// just adds a <br>

function addbr(obj)
{
if(typeof obj == "string")
obj = document.getEle mentById(obj);
br = document.create Element('br');
obj.appendChild (br);
}

// deletes all child nodes of obj, except for the first [keepnodes]

function clearContainer( obj,keepnodes)
{
if(typeof obj == "string")
obj = document.getEle mentById(obj);
while (obj.childNodes .length != keepnodes) {
obj.removeChild (obj.lastChild) ;
}
}

// this updates the text box. alert() there for debugging purposes
function updateBox(value )
{
alert('in updateBox()');
document.getEle mentById('nume' ).value = value;
setVisible('cho ices', false);
}

// function that actually does the search and updates the suggestions
<div>

function makeSuggestions ()
{

if (document.getEl ementById('nume ').value.length == 0) {
setVisible('cho ices',false);
}
else {
var matches = 0;

clearContainer( 'choices',2);
addbr('choices' );
for (i = 0; i < vect.length; i++) {
if (vect[i].indexOf(docume nt.getElementBy Id('nume').valu e) == 0) {
addbr('choices' );
adda('choices', vect[i],"updateBox( '" + vect[i] + "')");
matches++;
}
}
if (matches == 0) {
setVisible('cho ices',false);
}
else {
setVisible('cho ices',true);
}
}
}

choices starts as a hidden layer. When the user changes something the
script checks to see wether there are matches in vect[] for the text in
'nume'. If there aren't any the choices <div> is hidden. If there are
available choices they are displayed in the choices <div>. When the
user clicks one of the choices' links the value in 'nume' is updated
and the choices <div> is hidden.

This all works fine in Firefox and Opera. IE however doesn't update the
text box when the links are clicked. I inserted an alert() in the code
in the updateBox() function, to see if it gets called, and it doesn't.
So I believe IE doesn't properly assign the onClick attribute to the
link. Unfortunately there is no DOM inspector (like in FF), so all I
can do is guess what's wrong. IE won't display any errors.

Any ideas? What's wrong with the code? setAttribute() is a standard
method (W3 says) so it should work. It sets the 'href' part right, so I
can't see why 'onClick' won't work.

[Lasse Reichstein Nielsen]

"Radu Ciurlea" <ra*********@gm ail.com> writes:

function adda(obj,txt,ac tion)
{ .... newlnk.setAttri bute('onClick', action); .... } ..... adda('choices', vect[i],"updateBox( '" + vect[i] + "')"); I inserted an alert() in the code in the updateBox() function, to
see if it gets called, and it doesn't. So I believe IE doesn't
properly assign the onClick attribute to the link. Unfortunately
there is no DOM inspector (like in FF), so all I can do is guess
what's wrong. IE won't display any errors.
You are correct. IE doesn't parse updates to DOM attributes for event
handlers.
Any ideas? What's wrong with the code? setAttribute() is a standard
method (W3 says) so it should work.
You surely set the attribute. It just doesn't update the live part of
the DOM element, only what it considers the source code that lead to it.
It sets the 'href' part right, so I can't see why 'onClick' won't
work.

Logic? IE? Naaaah!

Anyway, just assign a function:

----
function adda(obj,txt,ac tion)
{
....
obj.onclick = action;
....
}
....
function makeUpdateCall( value) {
return function(){
updateBox(value );
};
}

function makeSuggestions ()
{
....
adda('choices', vect[i], makeUpdateCall( vect[i]));
....
---

Good luck.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Radu Ciurlea]

It was pretty dumb of me not to think of this in the first place, but
here goes:

function adda(obj,txt,ac tion)
{
if(typeof obj == "string")
obj = document.getEle mentById(obj);
newlnk = document.create Element('a');
newtext = document.create TextNode(txt);
newlnk.setAttri bute('href','Ja vaScript:' + action);
//newlnk.setAttri bute('onClick', action);
newlnk.appendCh ild(newtext);
obj.appendChild (newlnk);
}

Quick and dirty.