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 cou

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.

Answer 2

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 3

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.

Answer 4

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 5

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

Answer 6

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.