Add option to dropdown dynamically

Question

I have around 25 dropdowns and don't want to load all those dropdown unless the user clicks on them. I want to load the drodown only when the user actually clicks on the dropdown as each dropdown is tied to API call.

What I have a has a bug and the dropdown only get populated after second click, not the first click. The variables have data, but UI doesn't reflect that.

Does anyone has any thoughts? Here is what it looks like:

tr.find("select").click(function () {
    if ($(this).children().length <= 1) { // checking no of options; first one is default   
        var fieldName = $(this).attr('id');
        var selectValues = scope.getFilterData({ fieldName: fieldName }); // get formatted option values
        $(this).append(getSelectOptions(selectValues));
    }                                        }
});

I suspect the problem is in `getSelectOptions`. Is it using AJAX? Then you need to read http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Barmar, Jun 11 '14 at 20:02
Please see the jsFiddle: http://jsfiddle.net/premsh/9xfpY/1/ Even with the static values I have to click the dropdown twice to get the updated values. — premsh, Jun 11 '14 at 20:21

score 3 · Accepted Answer · answered Jun 11 '14 at 20:21

3

If you wait until the user clicks, it's probably already too late. The options are added after the browser attempts to display the options.

To alleviate that, use an event that occurs before click. I recommend using jQuery.One as well to eliminate over calling the function, which makes your if statement unnecessary.

Ex:

tr.find("select").one("mouseover", function () {
    var fieldName = $(this).attr('id');
    var selectValues = scope.getFilterData({
        fieldName: fieldName
    }); // get formatted option values
    $(this).append(getSelectOptions(selectValues));
});

Obviously this won't help for touch screens or if the user tabs into the element, but the main point is that you need to populate the select before it is needed not after.

answered Jun 11 '14 at 20:21

Daniel

12,982
3
36
60

Yup you are right. Is this the best way to resolve the issue? Seems to work. Thanks for the input! – premsh Jun 11 '14 at 20:28
@PremShrestha I don't know of a simpler way, if you want to use a standard select. – Daniel Jun 11 '14 at 20:39
@PremShrestha If your API call is very fast you could consider using `mousedown` instead of `mouseover` if you really want to avoid loading the options. – Daniel Jun 11 '14 at 20:53
Thanks for the tip. It should be fairly quick and most likely will be cached on both client side and server side. Are you aware of any dropdown options beside standard which allows this kind of functionality? – premsh Jun 11 '14 at 21:02
1

@PremShrestha It's not strictly a dropdown, but I have experience with and like [Twitter Typeahead](http://twitter.github.io/typeahead.js/). Just search for options there's plenty out there. – Daniel Jun 11 '14 at 21:16
Thank you, thank you, thank you! I spent all day trying to figure this out. It worked great on all browsers but freaking IE. Like you said, the options were being added after the browser was able to display the options. – AlexFreitas Sep 18 '14 at 22:41

score 1 · Answer 2 · answered Jun 11 '14 at 20:16

You say you are doing an API call.

I assume getSelectOptions(selectValues) is doing this.

The Problem is, you are doing this API call but $(this).append() is not waiting for it but just appends nothing.

I think the reason why the second click works is because the call is already cached at this point.

Try to append after successful API call. To help you with that we probably need your getSelectOptions function.

You will end up with something like:

tr.find("select").click(function () {
        if ($(this).children().length <= 1) { // checking no of options; first one is default   
            var fieldName = $(this).attr('id');
            var selectValues = scope.getFilterData({ fieldName: fieldName }); // get formatted option values

            $.ajax({
                ... ,
                success: function(response) {
                   $(this).append(response);
                }
            });
        }
});

Let's assume this is not an API call. here is the jsFiddle demo: http://jsfiddle.net/premsh/9xfpY/1/ I would like to add those static values when I click on the dropdown. In the above JSFiddle, we need to click on it twice to see the updated values. — premsh, Jun 11 '14 at 20:20

Add option to dropdown dynamically

2 Answers2