Problems populating a select list onfocus

Discussion in 'Javascript' started by xram, Aug 16, 2007.

  1. xram

    xram Guest

    I am trying to populate a select list when it receives focus. I am
    obtaining the data for the list via XmlHttpRequest and then using a
    for loop to loop through each option and add it to the select using
    the following code:

    document.getElementById("selDesigner").options[0] = new Option("Select
    a designer", "");
    for (var i = 0; i < arrDesigners.length; i++)
    {
    document.getElementById("selDesigner").options[i + 1] = new
    Option(arrDesigners.text, arrDesigners.value);
    }

    The select list is populated fine. The only problem I have occurs when
    you click on the select list for the first time in IE6 or IE7, the
    population of the select element causes it to close. It works fine in
    Opera and Firefox however (i.e. the drop-down list stays open when
    clicked).

    I've also tried to add options to the drop-down list by setting the
    innerHTML to a string containing the HTML of the option elements, but
    this doesn't work either.

    Has anyone found a workaround to this problem?

    Any help much appreciated.
     
    xram, Aug 16, 2007
    #1
    1. Advertising

  2. xram wrote:

    > I am trying to populate a select list when it receives focus. I am
    > obtaining the data for the list via XmlHttpRequest and then using a
    > for loop to loop through each option and add it to the select using
    > the following code:
    >
    > document.getElementById("selDesigner").options[0] = new Option("Select
    > a designer", "");
    > for (var i = 0; i < arrDesigners.length; i++)
    > {
    > document.getElementById("selDesigner").options[i + 1] = new
    > Option(arrDesigners.text, arrDesigners.value);
    > }
    >
    > The select list is populated fine. The only problem I have occurs when
    > you click on the select list for the first time in IE6 or IE7, the
    > population of the select element causes it to close. It works fine in
    > Opera and Firefox however (i.e. the drop-down list stays open when
    > clicked).


    I don't think it's possible in MSIE, and if it were, I think it would
    be awkward anyhow.

    Is it really necessary that text/values are requested from server
    again on every onFocus() ? Probably not, unless you're working with
    options that change frequently *without any user interaction*.

    I don't think you need onFocus() in this case. It causes unneeded
    traffic and slows down everything.

    I surmise that the new 'selDesigner' options depend on another select-
    element, since you are using text/value pairs for 'arrDesigners' in an
    array of objects. I think that using onChange() on the other element
    to update 'selDesigner', would be a better strategy.

    Hope to have helped more than confused,

    --
    Bart
     
    Bart Van der Donck, Aug 16, 2007
    #2
    1. Advertising

  3. I don't think there are any workarounds for your problem. I've seem
    this in my webapp myself, but I really could receive updates without
    user interaction (not the current user anyway, it would be other
    users), and I'd have to queue the new values and add them only after
    the blur, to avoid closing the user's select box while he was
    selecting.

    I think Bart has an excellent advice: if the contents depend on some
    other event, adding it the the "change" of the other control would be
    best.

    Let us know if that's not possible or not a good strategy for your
    particular app.
     
    Marcos Toledo, Aug 16, 2007
    #3
  4. xram

    xram Guest

    Thanks for your responses Bart and Marcos. Just to clarify the
    situation: I am not populating the drop down list each time it
    focuses, only the first time it receives focus it will be loaded. The
    reason for this is that the SQL required to populate the drop down
    list is quite intensive for the database to process. This drop down
    list was originally getting populated with server side (ASP.NET) code
    every time the page loaded. The site it is on is quite busy so my idea
    was to only populate it when a user used the drop down list (i.e.
    onfocus). But due to the issues with this in IE it is not a solution I
    can implement.

    As a result I ended up having the drop down list populated using an
    XmlHttpRequest through the window's onload event. The page that
    produces the XML for this request is cached on the server side and as
    a result has seen the performance improvements that were required.
     
    xram, Aug 30, 2007
    #4
    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. bruce barker

    Re: Checkbox and Radiobutton onfocus events

    bruce barker, Jul 23, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    1,180
    bruce barker
    Jul 23, 2003
  2. gerry
    Replies:
    0
    Views:
    548
    gerry
    Apr 24, 2004
  3. palmiere
    Replies:
    1
    Views:
    413
    Erwin Moller
    Feb 9, 2004
  4. Replies:
    4
    Views:
    118
  5. Eric Trav
    Replies:
    1
    Views:
    118
Loading...

Share This Page