JQuery UI Dialog slow

Question

I've recently ran into a bit of a pain. I've been using the JQuery Dialog box to display some configuration screens in a web app. Nothing too special. However I have a couple edge cases where this config form will display a drop down of some... 11000 options. [DODGES ROTTEN TOMATOES]

Needless to say, it's slow. It can take up to 9 seconds for the JQuery Dialog to show (and the init is slow as well).

First question is: Is there a way to speed up the Dialog boxes? From what it seems, it copies all the content each time it opens. If there was a way to avoid that, it would help a bit.

Second question: Are there any other jQuery Dialog boxes that perform better when being asked to display large amounts of data?

And as always, other solutions are welcome. Some autocomplete ajax wouldn't be bad, but probably still be slow unless it required at least a couple initial characters.

Answer 1

How about one select with all possible first letters getting via AJAX only options beginning with that letter into the second select?

Answer 2

Managed to improve the performance a little bit. I strayed from the JQuery UI and created a much lighter version. Instead of copying the contents of my target into my dialog, I construct my dialog around the content.

Performance wise, the dialog went from about 10 seconds to 2.

Answer 3

2 seconds sounds a lot better, but you'll probably find it is very much dependent on the users browser and system config - it might be much worse on a slower system in IE...

I'd seriously consider using something else instead of the mammoth drop-down (which surely can't be very user friendly) - it sounds like a good candidate for a autocomplete search box, or perhaps multi-level cascading drop-downs.

You could also create the dialog when the page loads, and only open it when needed (set autoOpen: false in the options)

Answer 4

If you have to do a drop down in a dialog like that, then I suggest loading the information into a hidden div ajax style after page load and then displaying that hidden div in whatever lightbox/dialog you are using when it's needed. That way the stuff will be loading while the user is doing other things, and will hopefully be ready by the time they are.