Issue while printing selected elements

Question

I have pagination implemented on my View developed in C# MVC. Pagination is implemented with AJAX. The user can selects the records across the pages of the view and when they click the Print button, which is on the page, only those selected records will be printed. In order to accomplish this I move the selected record into a <div id="ToPrintContainer" > which in the Layout page.

On the click of the print button

I clone the <div id="ToPrintContainer"> into my View.
set the property of .divPrintDetailed as display:none.
window.print()
Remove the display:none of .divPrintDetailed
Finally remove or empty the copied records.

<div id="ToPrintContainer" > will contain only the records the user want to print.

<div class ="divPrintDetailed"> will conatin all the records.

The problem is on print i see a blank page.

if i comment $('.copiedDivForPrint').empty();

I see the selected records in the print window, which is what I want to happen, but the copied over records won't get cleared from the view.

Pasted below is the jQuery code.

$('#btnPrnt').unbind('click').bind("click", function () {
// copy the selected records into the view 
          $("#divTestPrintContainer").clone().addClass('copiedDivForPrint').insertAfter('.StatsCriteria');
// don't display the entire records on print
        $('.divPrintDetailed').css({ 'display': 'none' });
        window.print();
        $('.divPrintDetailed').css({ 'display': '' });
        $('.copiedDivForPrint').empty();
        return false;
    });

[This guy](http://stackoverflow.com/a/7644857/221708) has a really elegant approach to printing - basically your approach (modify page with javascript, `window.print`, then revert back), plus some extra bits to handle the case where the user clicks "Print" from the browser's menu. — Daniel Schilling, Jul 18 '13 at 20:19
Is `#divTestPrintContainer` contained within `.divPrintDetailed`? — Daniel Schilling, Jul 18 '13 at 20:21
When you comment out `$('.copiedDivForPrint').empty();`, does it print correctly? If so, that's really surprising because `window.print` supposedly blocks until it's done - so I wouldn't expect code after `window.print` to affect what was printed. What browser are you using? — Daniel Schilling, Jul 18 '13 at 20:25
Do you have any `media="print"` styles that could be hiding the div? Perhaps CSS float rules are shoving it off the page? Maybe the cloned div (or one of its children) has the same `id` as an existing element on the page, and perhaps that's causing JS/CSS weirdness? Also, I notice that you create a new `.copiedDivForPrint` `div`, but you never remove it - you only empty it. — Daniel Schilling, Jul 18 '13 at 20:30
@Daniel, .divPrintDetailed is not contained with in #divTestPrintContainer. I am using Chrome. — BumbleBee, Jul 18 '13 at 20:39

score 1 · Answer 1 · answered Jul 18 '13 at 19:15

1

Sometimes it's easier to come from a completely different direction:

1) Copy the content you want to a hidden Iframe (including your stylesheet declarations - make a dummy page wrapper stub).

2) Print from the Iframe.

answered Jul 18 '13 at 19:15

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Accepted Answer · answered Jul 18 '13 at 23:40

0

Delaying the execution of the code after window.print() fixed the issue.

setTimeout() came to my rescue.

Fix :

setTimeout(function () {
            $("#cpdDivFPrt").remove();
        }, 500);

answered Jul 18 '13 at 23:40

BumbleBee

10,429
20
78
123

Issue while printing selected elements

2 Answers2