8

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.

Community
  • 1
  • 1
Curtis
  • 101,612
  • 66
  • 270
  • 352

4 Answers4

3

Change the event to listen for from click to focus

AndyPerlitch
  • 4,539
  • 5
  • 28
  • 43
  • Bare in mind we're talking about AJAX calls. Even if the call only takes 50 milliseconds your solution has the same results http://jsfiddle.net/PJvM3/7/ – Curtis Oct 15 '12 at 15:23
  • hmm... The data still populates, but the opened select does not update. I'm wondering if an open list of options from a select can even be updated in the way you are trying to accomplish. It seems like an opened select is kind of like a "frozen snapshot." – AndyPerlitch Oct 15 '12 at 15:29
  • Exactly, its almost as if I need to prevent opening of the dropdown until the callback responds, and then write some code in there (inside the setTimeout() in my example i guess) which will open it when its ready. That or somehow tell the snapshot to update itself. – Curtis Oct 15 '12 at 15:30
  • 1
    I tried calling preventDefault() on the focus and click events, but that didn't do anything. You MAY need to go with a js alternative, like [chosen](http://harvesthq.github.com/chosen/). See the docs on updating – AndyPerlitch Oct 15 '12 at 15:35
2

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?

Community
  • 1
  • 1
musefan
  • 47,875
  • 21
  • 135
  • 185
  • 1
    Thanks for your response. After hours of toying with this I've come to the conclusion that this isn't possible, and that the logical design will have to change. I don't wish to cause AJAX calls on DOM ready however (potentially 100s of dropdowns on each page). I'm thinking on hover of the dropdown, or within 100px distance of it, the dropdown is disabled, AJAX called, re-enabled. – Curtis Oct 17 '12 at 09:24
1

The select will always display as it was before the click event started. You will therefore see only the initial option because you do the AJAX population after the click event started.

This may be a compromise for you but try to AJAX-populate before the click event. This may be: -on hover, as you have done already (user has to scroll for the click anyway) -an extra click for your users on an element neighbouring the select

sainiuc
  • 1,697
  • 11
  • 13
  • Hover may not be a suitable solution because if the user was to hover, and then click immediately, the AJAX response may not have taken place – Curtis Oct 16 '12 at 08:23
  • If hover is not an option you could go for the second solution: have a div to be clicked before the select and the click on the div will populate the select (force the user to click twice). – sainiuc Oct 16 '12 at 09:22
  • hover, disable the select, enable when ajax returns – sports May 09 '14 at 00:42
0

Hide the drop down list and have something else in its place for the user to click on to trigger loading the drop down and displaying it.

Tim
  • 1