jquery UI dialog open is mind-numbingly slow in IE7

Question

Have a large amount of HTML, but where I thought the bottleneck would be is incorrect: it's when I'm opening the dialog, not when I'm building the string of HTML (~35ms), nor when I'm appending it to the dialog container div (~50ms). When calling dialog("open") below In FF, I'm consistently getting 1800+ ms, IE7 is around 17000(!) ms. I can live with 1800ms, but in IE7 (99% of my user base), that's way too long.

// prep dialog
$("#print-box").dialog({
 bgiframe: false,
 width:900,
 height: 1000,
 modal: true,
 autoOpen: false,
 draggable: false
 });

// display selected items in print preview modal
$("#print-preview").click( function() {

 $('#print-box').empty();

 var tmp = ['<div class="print-container">'];
 var rows = $('[name="print-this-listing"]:checked').parents("div.listing").clone();

 for (var i=0; i < rows.length; i++) {
     tmp.push($(rows[i]).html());
 }

 tmp.push('</div>');

 $('#print-box').html(tmp.join(''));
 $('#print-box').dialog('open');
});

Any ideas? I'm trying to build a print preview page and would rather not take another round trip to the server to fetch all that data again, but it's much much quicker than client-side right now.

Answer 1

I came across a similar problem in using the jQuery UI Dialog. To speed things up try opening the dialog first and then append the data.

    $('#print-box').dialog('open');
    $('#print-box').html(tmp.join(''));

This seemed to help for me. Also check to see if you have any broken tags or malformed HTML in the string you are appending.