html/JavaScript/DOM problems under IE

R

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] = "accelerator";
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="makeSuggestions()">
<input class="box" type="submit" name="submit" id="submit"
value="Submit">
</form>
</p>
<div id="choices">
<b>Suggestions</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,action)
{
if(typeof obj == "string")
obj = document.getElementById(obj);
newlnk = document.createElement('a');
newtext = document.createTextNode(txt);
newlnk.setAttribute('href','#');
newlnk.setAttribute('onClick',action);
newlnk.appendChild(newtext);
obj.appendChild(newlnk);
}

// just adds a <br>

function addbr(obj)
{
if(typeof obj == "string")
obj = document.getElementById(obj);
br = document.createElement('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.getElementById(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.getElementById('nume').value = value;
setVisible('choices', false);
}

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

function makeSuggestions()
{

if (document.getElementById('nume').value.length == 0) {
setVisible('choices',false);
}
else {
var matches = 0;

clearContainer('choices',2);
addbr('choices');
for (i = 0; i < vect.length; i++) {
if (vect.indexOf(document.getElementById('nume').value) == 0) {
addbr('choices');
adda('choices',vect,"updateBox('" + vect + "')");
matches++;
}
}
if (matches == 0) {
setVisible('choices',false);
}
else {
setVisible('choices',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.
 
L

Lasse Reichstein Nielsen

Radu Ciurlea said:
function adda(obj,txt,action)
{ ....
newlnk.setAttribute('onClick',action); ....
}
.....
adda('choices',vect,"updateBox('" + vect + "')");

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,action)
{
....
obj.onclick = action;
....
}
....
function makeUpdateCall(value) {
return function(){
updateBox(value);
};
}

function makeSuggestions()
{
....
adda('choices', vect, makeUpdateCall(vect));
....
 
R

Radu Ciurlea

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

function adda(obj,txt,action)
{
if(typeof obj == "string")
obj = document.getElementById(obj);
newlnk = document.createElement('a');
newtext = document.createTextNode(txt);
newlnk.setAttribute('href','JavaScript:' + action);
//newlnk.setAttribute('onClick',action);
newlnk.appendChild(newtext);
obj.appendChild(newlnk);
}

Quick and dirty.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top