Curt Curt - 6 months ago 20
jQuery Question

Populate HTML dropdown onclick

I have a page which contains multiple HTML

select
dropdowns, and requires population
onclick
of the element. This population is done using an AJAX call in the click event listener of the
select
elements.

The reason for this is that performance and load are very crucial, and therefore they cannot be populated on page load.

Also, the design must use the native HTML
select
element.




I have created a jsFiddle demo to show the issue. When you click on the
select
the items are populated, and the width of the
select
increases as a result.

enter image description here

However the
select
only displays the initial option (prior to AJAX population).

------ View Demo ------



Demo uses
setTimeout()
of 50 milliseconds to emulate an AJAX response time.





How can I get this to populate
onclick
, and display correctly?

Is there a way of opening the
select
on callback of the popualation response?

EDIT: Alternatively, is there a jQuery plugin dropdown, which uses the browser's native theme for styling?




What I've tried so far


  • Populating the
    select
    on hover, however a quick user can open the
    select
    before the options have loaded. Also, if a user was to scroll all the way down the page, and over every
    select
    , this would cause a lot of unnecessary AJAX calls.

  • Changing the event listener to
    focus
    instead of
    click
    (as @AndyPerlitch suggested). However, this wouldn't work if the AJAX request took only 50 milliseconds to respond. (See Demo)

  • Changing the event listener to
    mousedown
    has the same effect as
    focus






UPDATE: This is not an issue in FireFox.
select
opens, then loads new items and displays them, all while in an open state.

Answer

Personally I would opt for a different approach completely, but it depends on you needs. Here I am assuming that the drop down will "almost definitely" be clicked (and thus loaded) at some point by the user.

With that in mind I would be tempted to populate the select lists using ajax as soon as the page is loaded. This has the benefit of being able to load the page quick (as there is still no "page load" list collecting) but it also means the ajax will most likely be complete before the user works out that they need to use the select list. I would even go an extra step and have temporary loading icons in place of the selected while the ajax is working it's magic (or disable them!) in case the ajax is having a slow day and the user is fast like superman.

of course, this all depends on how "set in stone" your requirement is to do the ajax load upon user interaction with the drop down element


or maybe this might prove some use?

Comments