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.