html/JavaScript/DOM problems under IE

Discussion in 'Javascript' started by Radu Ciurlea, May 1, 2005.

  1. Radu Ciurlea

    Radu Ciurlea Guest

    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.
    Radu Ciurlea, May 1, 2005
    #1
    1. Advertising

  2. "Radu Ciurlea" <> writes:

    > 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));
    ....
    ---

    Good luck.
    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, May 1, 2005
    #2
    1. Advertising

  3. Radu Ciurlea

    Radu Ciurlea Guest

    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.
    Radu Ciurlea, May 1, 2005
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thorsten Meininger
    Replies:
    0
    Views:
    439
    Thorsten Meininger
    Jul 28, 2004
  2. Thorsten Meininger
    Replies:
    0
    Views:
    503
    Thorsten Meininger
    Jul 28, 2004
  3. Replies:
    0
    Views:
    545
  4. Todd
    Replies:
    0
    Views:
    120
  5. DOM ? HTML DOM

    , Dec 19, 2007, in forum: Javascript
    Replies:
    1
    Views:
    120
Loading...

Share This Page