id and problem in Firefox

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • R. Rajesh Jeba Anbiah
    #1

    id and problem in Firefox

    In IE, I could be able to directly refer the "id", but it isn't
    possible in Firefox. Somewhere I read the solution is to refer the id
    like document.getEle mentById("month ") in Firefox. If I do so, the
    script works well in Firefox, but IE throws error. (I have added the
    code snippet below).

    So, my question is: is there anyway to make the script work in all
    browser *without* any browser fix ie, without adding any browser
    detection check? Is this behavior is only for Firefox or any other
    browsers also work like this (I don't have access to many browsers to
    test)? TIA

    <snippet>

    <HEAD>
    <SCRIPT LANGUAGE=javasc ript>
    <!--
    function PopulateMonths( )
    {
    //month is id used with select
    //month = document.getEle mentById("month "); //<-- for Firefox
    month.options.l ength = 0; //clear options
    for(var i=1; i<=12; ++i)
    {
    opt = new Option();
    opt.text = i;
    opt.value = i;
    month.options[i-1] = opt;
    }
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <!--month options-->
    <SELECT name="month" id="month">
    </SELECT>
    <!--calling script-->
    <SCRIPT>
    PopulateMonths( ); //calling populate for the above options
    </SCRIPT>
    </BODY>

    </snippet>

    --
    Email: rrjanbiah-at-Y!com
    Tags: None
    • Colin McKinnon
      #2
      Re: id and problem in Firefox

      R. Rajesh Jeba Anbiah wrote:
      [color=blue]
      > In IE, I could be able to directly refer the "id", but it isn't
      > possible in Firefox. Somewhere I read the solution is to refer the id
      > like document.getEle mentById("month ") in Firefox. If I do so, the
      > script works well in Firefox, but IE throws error. (I have added the
      > code snippet below).
      >[/color]
      <snip>[color=blue]
      > <HEAD>
      > <SCRIPT LANGUAGE=javasc ript>
      > <!--
      > function PopulateMonths( )
      > {
      > //month is id used with select
      > //month = document.getEle mentById("month "); //<-- for Firefox
      > month.options.l ength = 0; //clear options
      > for(var i=1; i<=12; ++i)
      > {
      > opt = new Option();
      > opt.text = i;
      > opt.value = i;
      > month.options[i-1] = opt;
      > }
      > }[/color]
      <snip>[color=blue]
      > <SELECT name="month" id="month">
      > </SELECT>
      > <!--calling script-->
      > <SCRIPT>
      > PopulateMonths( ); //calling populate for the above options
      > </SCRIPT>[/color]

      Odd, similar works OK for me across both IE and Firefox. Maybe IE is getting
      upset because your assigning the widget to a variable with the same name as
      an HTML Element in the same DOM scope? Try enclosing the select in
      <form>...</form> or change the JS variable name.

      HTH

      C.

        Comment

        • Mark Preston
          #3
          Re: id and problem in Firefox

          R. Rajesh Jeba Anbiah wrote:
          [color=blue]
          > In IE, I could be able to directly refer the "id", but it isn't
          > possible in Firefox. Somewhere I read the solution is to refer the id
          > like document.getEle mentById("month ") in Firefox. If I do so, the
          > script works well in Firefox, but IE throws error. (I have added the
          > code snippet below). [snip]
          >
          > <snippet>
          >
          > <HEAD>
          > <SCRIPT LANGUAGE=javasc ript>
          > <!--
          > function PopulateMonths( )
          > {
          > //month is id used with select
          > //month = document.getEle mentById("month "); //<-- for Firefox
          > month.options.l ength = 0; //clear options
          > for(var i=1; i<=12; ++i)[/color]
          [snip]

          I have no problem using code like yours in MSIE - perhaps you have an
          older version of IE where the problem arises? Certainly in modern
          versions, the W3C standard DOM and object methods like getElementById
          sholud work perfectly well.

          Don't bother to "detect browsers" though - check the objects and methods
          themselves so you can do something like:-

          if (document.getEl ementById) month = document.getEle mentById ("month")
          else {
          if (document.all && <your MSIE object/method>) {
          // do MSIE code here
          }
          }

            Comment

            • Robert
              #4
              Re: id and problem in Firefox

              > <SELECT name="month" id="month">

              Also, I'd make these variables different.

              Robert

                Comment

                • DU
                  #5
                  Re: id and problem in Firefox

                  R. Rajesh Jeba Anbiah wrote:
                  [color=blue]
                  > In IE, I could be able to directly refer the "id", but it isn't
                  > possible in Firefox. Somewhere I read the solution is to refer the id
                  > like document.getEle mentById("month ") in Firefox. If I do so, the
                  > script works well in Firefox, but IE throws error. (I have added the
                  > code snippet below).
                  >
                  > So, my question is: is there anyway to make the script work in all
                  > browser *without* any browser fix ie, without adding any browser
                  > detection check? Is this behavior is only for Firefox or any other
                  > browsers also work like this (I don't have access to many browsers to
                  > test)? TIA
                  >
                  > <snippet>
                  >
                  > <HEAD>
                  > <SCRIPT LANGUAGE=javasc ript>[/color]

                  <script type="text/javascript">
                  [color=blue]
                  > <!--
                  > function PopulateMonths( )
                  > {
                  > //month is id used with select[/color]

                  But you also use name="month" in your code. So, there is a confusion
                  already here.
                  [color=blue]
                  > //month = document.getEle mentById("month "); //<-- for Firefox
                  > month.options.l ength = 0; //clear options
                  > for(var i=1; i<=12; ++i)
                  > {
                  > opt = new Option();
                  > opt.text = i;
                  > opt.value = i;
                  > month.options[i-1] = opt;
                  > }
                  > }
                  > //-->
                  > </SCRIPT>
                  > </HEAD>
                  > <BODY>
                  > <!--month options-->[/color]

                  You need to insert <form action=""> element here.
                  [color=blue]
                  > <SELECT name="month" id="month">
                  > </SELECT>
                  > <!--calling script-->
                  > <SCRIPT>
                  > PopulateMonths( ); //calling populate for the above options
                  > </SCRIPT>
                  > </BODY>
                  >
                  > </snippet>
                  >[/color]

                  I would validate your HTML markup code first of all, preferably with a
                  strict doctype decl. because that will trigger MSIE 6 into web standards
                  compliant rendering mode.

                  List of valid DTDs you can use in your document.
                  W3C QA - Recommended list of Doctype declarations you can use in your Web document
                  http://www.w3.org/QA/2002/04/valid-dtd-list.html


                  Like someone else in the thread said, you first need to embed that
                  <select> inside a <form>. <form> also requires an action attribute.

                  Your populate select function could be streamlined a bit and clarified also:

                  function PopulateMonths( )
                  {
                  var objMonthSelect;
                  if(document.get ElementById)
                  {
                  objMonthSelect = document.getEle mentById("month ");
                  }
                  else if(document.all && !document.getEl ementById) // MSIE 4 only
                  {
                  objMonthSelect = month;
                  };
                  objMonthSelect. options.length = 0; //clear options
                  for(var i=0; i<12; i++)
                  {
                  opt = new Option();
                  opt.text = i;
                  opt.value = i;
                  objMonthSelect. options[i] = opt;
                  };
                  }

                  You should also always use differential (and preferably meaningful)
                  identifiers for name attribute and id attribute for several reasons:
                  code reviewing by others, better discrimination of how your code
                  accesses nodes, better understanding of your code inner logic. <select
                  name="month" id="month"> just confuses the way certain browser actually
                  accesses nodes when one does
                  month.[some attribute]

                  Since above 96% of all browsers in use out there support flawlessly
                  getElementById method, then there is no problem with replacing
                  month
                  by
                  document.getEle mentById("month ")
                  with proper object support for that method

                  Finally, I recommend you always call functions like PopulateMonths( ) on
                  the onload event of the body element, not as the document is being
                  parsed and rendered for several reasons.

                  DU

                    Comment

                    • R. Rajesh Jeba Anbiah
                      #6
                      Re: id and problem in Firefox

                      Colin McKinnon <colin.deleteth is@andthis.mms3 .com> wrote in message[color=blue][color=green]
                      > > In IE, I could be able to directly refer the "id", but it isn't
                      > > possible in Firefox. Somewhere I read the solution is to refer the id
                      > > like document.getEle mentById("month ") in Firefox. If I do so, the
                      > > script works well in Firefox, but IE throws error. (I have added the
                      > > code snippet below).[/color][/color]
                      <snip>[color=blue]
                      > Odd, similar works OK for me across both IE and Firefox. Maybe IE is getting
                      > upset because your assigning the widget to a variable with the same name as
                      > an HTML Element in the same DOM scope? Try enclosing the select in
                      > <form>...</form> or change the JS variable name.
                      >[/color]

                      Great! Your solutions work like a charm! Thanks for your time and help.

                      --
                      Email: rrjanbiah-at-Y!com

                        Comment

                        • R. Rajesh Jeba Anbiah
                          #7
                          Re: id and problem in Firefox

                          Mark Preston <usenet@mpresto n.demon.co.uk> wrote in message news:<cevsg1$mk q$1$8300dec7@ne ws.demon.co.uk> ...
                          <snip>

                          Many thanks to all the experts who answered in this thread. Your
                          solutions and answers are really helpful.
                          [color=blue][color=green]
                          > > //month is id used with select
                          > > //month = document.getEle mentById("month "); //<-- for Firefox
                          > > month.options.l ength = 0; //clear options
                          > > for(var i=1; i<=12; ++i)[/color]
                          > [snip]
                          >
                          > I have no problem using code like yours in MSIE - perhaps you have an
                          > older version of IE where the problem arises?[/color]

                          I'm using new versions of IE and Firefox. Colin McKinnon, Robert
                          and DU solutions are working great. Many thanks again.

                          --
                          Email: rrjanbiah-at-Y!com

                            Comment

                            Previous template Next
                            Working...