Question

I have a working dialog box that loads content correctly.
The dialog also has a print button which executes .jqprint against the DIV in the dialog box.
This prints fine the first time but every subsequent print command prints whatever was printed first.
The dialog shows the correct new information.
I added a ALERT button which also shows the old content.

$("tr[id^=contract_]").css("cursor","hand").live("click",function(e) { 
    var sContract = $(this).attr("id").split("_")[1];
    $("<div id=\"printthis\" style=\"border:1px; #ffffff solid;\"></div>")
        .load("_contractdetails.aspx?contract=" + sContract + "")
        .dialog({
                autoOpen: true,
                title: "Contract Detail",
                draggable: true,
                modal: true,
                width:900,
                height:450,
                buttons: { "Close": function() { $(this).dialog("close");    },
                           "Print": function() { $("#printthis").jqprint(); },
                           "ALERT": function() { alert($("#printthis").html()); }
                         },
                resizable: true 
        });
});

Why isnt #printthis recreated each time?
Should I destroy the memory copy of #printthis somehow?
Is this a limitation of .jqprint?

Answer 1

You need to remove the old div first – otherwise you use the same id twice which can result in lots of odd behaviour. Another solution would be only creating the div when necessary:

var div = $('#printthis');
if(!div.length) {
    div = $('<div id="printthis" style="border:1px; #ffffff solid;"></div>');
}

Besides that, you might want to open the dialog from the success callback of load() since otherwise you open the dialog with the old contents and then – a few moments later when the server response arrived – update it with the new contents.