Loading ...
Sorry, an error occurred while loading the content.
 

Object 'class' in IE vs FF

Expand Messages
  • Mike Sexter
    I m developing my YUI app and have the need to replace the options on a select. The following code is what I m using to do this: replaceOptions = function (id,
    Message 1 of 3 , May 2, 2007
      Message
      I'm developing my YUI app and have the need to replace the options on a select. The following code is what I'm using to do this:
       

      replaceOptions =

      function (id, opts){

          var sel = document.getElementById(id);

          alert(sel);

          if (sel) {

              var i = sel.length;

              while (i > 0) {

                  sel.remove(--i);

              }

              for (i=0; i<opts.optionSet.length; i++) {

                  var opt = new Option();

                  opt.value = opts.optionSet[i].value;

                  opt.text = opts.optionSet[i].text;

                  sel.add(opt,

      null);

              }

              sel.selectedIndex = 0;

          }

      }

       

      This works fine on Firefox but fails on line 13 on IE because of a 'Type mismatch'.
      The alert on line 3 outputs [object HTMLSelectElement] on FF but only [object] on IE.
      Hence the problem. Any help on how to deal with this would be appreciated.
       
      - Mike
        
    • Satyam
      MessageI noticed the same problem, the add method on a select object does not behave the same in IE and FF. I don t know the reason or how to solve it
      Message 2 of 3 , May 3, 2007
        Message
        I noticed the same problem, the add method on a select object does not behave the same in IE and FF.   I don't know the reason or how to solve it 'DOM'-wise.   By the time I was trying to solve it, I saw a video at the YUI theater about optimization and it said that loading the innerHTML property with plain HTML to parse was often faster than manipulating the DOM so I changed my function to make a string containing the proper HTML for the select and then assigned it to the innerHTML of the div containing the select box.
         
        Satyam
         
        ----- Original Message -----
        Sent: Thursday, May 03, 2007 5:15 AM
        Subject: [ydn-javascript] Object 'class' in IE vs FF

        I'm developing my YUI app and have the need to replace the options on a select. The following code is what I'm using to do this:
         

        replaceOptions =

        function (id, opts){

            var sel = document.getElementById(id);

            alert(sel);

            if (sel) {

                var i = sel.length;

                while (i > 0) {

                    sel.remove(--i);

                }

                for (i=0; i<opts.optionSet.length; i++)

                    var opt = new Option();

                    opt.value = opts.optionSet[i].value;

                    opt.text = opts.optionSet[i].text;

                    sel.add(opt,

        null);

                }

                sel.selectedIndex = 0;

            }

        }

         

        This works fine on Firefox but fails on line 13 on IE because of a 'Type mismatch'.
        The alert on line 3 outputs [object HTMLSelectElement] on FF but only [object] on IE.
        Hence the problem. Any help on how to deal with this would be appreciated.
         
        - Mike
          


        No virus found in this incoming message.
        Checked by AVG Free Edition.
        Version: 7.5.467 / Virus Database: 269.6.2/785 - Release Date: 02/05/2007 14:16
      • Gopalarathnam Venkatesan
        ... Hi Mike: You can use document.createElement() to create the option element on the fly. Here s a quick example for the same:
        Message 3 of 3 , May 3, 2007
          Mike Sexter wrote:
          >
          >
          > I'm developing my YUI app and have the need to replace the options on a
          > select. The following code is what I'm using to do this:
          >
          >
          >
          > replaceOptions = function (id, opts){
          >
          > var sel = document.getElementById(id);
          >
          > alert(sel);
          >
          > if (sel) {
          >
          > var i = sel.length;
          >
          > while (i > 0) {
          >
          > sel.remove(--i);
          >
          > }
          >
          > for (i=0; i<opts.optionSet.length; i++) {
          >
          > var opt = new Option();
          >
          > opt.value = opts.optionSet[i].value;
          >
          > opt.text = opts.optionSet[i].text;
          >
          > sel.add(opt, null);
          >
          > }
          >
          > sel.selectedIndex = 0;
          >
          > }
          >
          > }
          >
          >
          >
          > This works fine on Firefox but fails on line 13 on IE because of a 'Type
          > mismatch'.
          > The alert on line 3 outputs [object HTMLSelectElement] on FF but only
          > [object] on IE.
          > Hence the problem. Any help on how to deal with this would be appreciated.
          >

          Hi Mike:

          You can use document.createElement() to create the "option" element on
          the fly.

          Here's a quick example for the same:
          http://gopalarathnam.com/examples/javascript/dynseladd.html

          But as someone has already mentioned in this list, creating the "select"
          and the "option" elements as an HTML string and dumping them into the
          container is much faster than using DOM methods.

          You can see the "Writing Efficient JavaScript" video available YUI Theater:

          http://developer.yahoo.com/yui/theater/

          The slides/handouts are available from my web site:

          Slides -
          http://gopalarathnam.com/talks/Writing_Efficient_JavaScript_F2ESummit2007.pdf
          Handouts -
          http://gopalarathnam.com/talks/Writing_Efficient_JavaScript_F2ESummit2007_Handout.pdf

          --
          Gopalarathnam Venkatesan

          http://gopalarathnam.com/
        Your message has been successfully submitted and would be delivered to recipients shortly.