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

I've face this problem and found the solution here: http://forum.jquery.com/topic/select-in-dialog-causes-slowness-in-ie8

Just had to set the dialog draggable and resizable options to false.

Answer 2

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

Answer 3

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 4

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 5

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.

Answer 6

Setting draggable and resizable to false worked.

Answer 7

depending on what html you're using to display the data, ie can be super slow vs chrome or firefox.

especially when you're displaying big tables. these links might be useful - you might even knock off a little more time.

http://jquery-howto.blogspot.com/2009/02/5-easy-tips-on-how-to-improve-code.html

http://www.artzstudio.com/2009/04/jquery-performance-rules/

Answer 8

I just ran into this issue using a tabbed dialog with hundreds of checkboxes. I found this link to be very helpful. Took 17s to open the dialog before, but now it's down to about 1.3s. (I'm using a draggable non resizeable dialog)

The trick is to detach the html before you open the dialog, and then use the open function for the dialog to reattach the content.

$('#triggerDialogFast').click(function () {
    var $dialogContainer = $('#dialogContentFast');
    var $detachedChildren = $dialogContainer.children().detach();
    $dialogContainer.dialog({
        width: 425,
        height: 400,
        draggable: false,
        resizable: false,
        open: function () {
            $detachedChildren.appendTo($dialogContainer);
        },
    });
});

I'm not sure but it should probably work by just attaching the html in the open function if that is possible in your scenario.