ansaurus

Question

Loading dropdownlist on click of the dropdown's arrow/lazy loading of dropdown

Answer 1

+1 A:

I would suggest that you use different javascript events to trigger this behavior. The best that I can think of is to use the onfocus and onmouseover events.

Using the onfocus event will allow your page to work for people who navigate to the drop down lists without clicking directly on the control; a person could use the keyboard and tab until focus reaches the drop down list. Alternatively (though probably not as relevant), a person might click on a <label> tag for your drop down list control. Doing so will also cause focus to be set on the drop down list.

Using the onmouseover event will allow you to populate the drop down list before the user clicks on it, preventing the necessary second click that you mentioned.

EDIT: I did some experimentation and found that you might want to use the onmousedown event instead of the onmouseover event. The advantage is that it doesn't unnecessarily load data if the user just happens to pass the mouse over the drop down list without actually clicking on it, and it does not interrupt the expansion of the drop down list, so the user only needs to click once in order to expand it. The downside is that the user may have to wait for the data, since you're waiting until the user actually clicks in order to decide to load data. Depending on how much data you have and how fast the server can retrieve the data, this wait may or may not be significant.

Below is a simple example page where I've demonstrated using these two javascript events:

<html>
    <head>
        <script type="text/javascript" language="javascript">
            function load(ddl)
            {
                if(ddl.options.length == 0)
                {
                    ddl.options[0] = new Option("Option 1", "1", false, false);
                    ddl.options[1] = new Option("Option 2", "2", false, false);
                    ddl.options[2] = new Option("Option 3", "3", false, false);
                }
            }
        </script>
    </head>
    <body>
        <label for="DropDownList1">Drop Down List 1:</label>
        <select id="DropDownList1" onfocus="load(this);" onmouseover="load(this);">
        </select>
    </body>
</html>

I haven't tried running your sample code, but it looks to me like you're using javascript to trigger a button click in order to cause a postback so that you can populate the drop down list control on the server. If you're doing a postback, then you're not going to be able to avoid having the entire page or at least part of the page reload, meaning that your drop down list won't stay expanded.

Instead of causing a postback, I'd recommend using ajax to make a call to the server in order to retrieve the data, then take that data and use it to populate your drop down list in javascript.

This seems like a decent article that explains how to set something like that up: http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET This article is describing how to implement cascading drop down lists, which doesn't sound exactly like what you're trying to do, but it's pretty close.

Dr. Wily's Apprentice 2010-09-17 21:54:11

ansaurus

tags:

views:

answers:

Loading dropdownlist on click of the dropdown's arrow/lazy loading of dropdown

related questions