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.

Tigges

Man, that is a looooong drop down list. Even if you are able to solve your technical problem I would suggest using different control maybe filtered list or some kind of data browser. Depending on the data content. – Ironbound

Answer 1

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.

Tigges

Answer 2

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.

Speculation

I just stumbled upon your answer while wrestling with the exact same problem. Worked like a charm! – Treasurehouse

Wow, what a weird co-incidence. I am having this same problem again more than a year later on a box running IE 10 and found that resizable and draggable seem to have no discernable impact on the slowness. – Treasurehouse

Answer 3

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

Merozoite

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)

Fend

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.

Amy

That would be a good solution for the initial load. Though the load wasn't influenced too horrible. The issue came when it was time for IE to render the drop down. Initially the div is invisible and everything goes on fine. The biggest issue was that the JQuery UI dialog box had to copy all that information in the DOM in order to move it into it's custom containers. It also did this each time the dialog was loaded. The new dialog now wraps the existing data rather than copy it. This seemed to speed things up a bit. Did struggle with the semi transparent washout but it works well enough now. – Tigges

Answer 6

Setting draggable and resizable to false worked.

Kyoko

I have a similar problem (but without the gigantic drop-down) and setting draggable and resizable to false did not work for me. – Treasurehouse

Answer 7

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.

Pyrogallol

Answer 8

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/

Thoroughpaced