CODEWITHSUNDEEP
jquery
ppff
ppff

Reputation: 323

Add option to dropdown dynamically

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));
    }                                        }
});

Upvotes: 0

Views: 97

Answers (2)

Daniel
Daniel

Reputation: 13142

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.

Upvotes: 3

Tom
Tom

Reputation: 188

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);
                }
            });
        }
});

Upvotes: 1

Related Questions