ansaurus

Question

Using JQuery to open a popup window and print

Answer 1

A:

You should put the print function in your view-details.php file and call it once the file is loaded by either using <body onload="window.print()"> or $(document).ready(function () { window.print(); });

Ivo Sabev 2010-04-08 21:12:19

Well, I'm trying to do this without adding code to the view-details.php file because that file shouldn't need to know that it's being printed. That way I don't have to add a snippit of code to every file I load into the lightbox.

TJ Kirchner 2010-04-08 21:19:24

Why do you use window.open if you are loading it in Lightbox? If you are using jQuery to load the HTML via AJAX you can use the .load() function in jQuery and trigger the print with the onSuccess callback.

Ivo Sabev 2010-04-08 21:50:31

Because I can't print very well from a lightbox. I've got all this black background surrounding it. It looks and prints better in its own window.It's an interesting idea, using .load(), but I don't want the contents to print right after the lightbox loads. Only when the user clicks on the print link do I want the box to print.

TJ Kirchner 2010-04-08 21:59:28

You can have your print button disabled and in the .load() onSuccess callback enable it so you ensure no one prints before page is loaded.

Ivo Sabev 2010-04-08 22:13:32

Answer 2

A:

Are you sure you can't alter the HTML in the popup window?

If you can, add a <script> tag at the end of the popup's HTML, and call window.print() inside it. Then it won't be called until the HTML has loaded.

Stuart Sierra 2010-04-08 21:12:55

I don't want to alter the html code in the popup window... but maybe I could append an onload="window.print()" to the html being loaded... let me play with that idea a little

TJ Kirchner 2010-04-08 21:21:07

Answer 3

A:

Got it! I found an idea here

http://www.mail-archive.com/[email protected]/msg18410.html

In this example, they loaded a blank popup window into an object, cloned the contents of the element to be displayed, and appended it to the body of the object. Since I already knew what the contents of view-details (or any page I load in the lightbox), I just had to clone that content instead and load it into an object. Then, I just needed to print that object. The final outcome looks like this:

$('.printBtn').bind('click',function() {
    var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
    $('#popup-content').clone().appendTo( thePopup.document.body );
    thePopup.print();
});

I had one small drawback in that the style sheet I was using in view-details.php was using a relative link. I had to change it to an absolute link. The reason being that the window didn't have a URL associated with it, so it had no relative position to draw on.

Works in Firefox. I need to test it in some other major browsers too.

I don't know how well this solution works when you're dealing with images, videos, or other process intensive solutions. Although, it works pretty well in my case, since I'm just loading tables and text values.

Thanks for the input! You gave me some ideas of how to get around this.

TJ Kirchner 2010-04-08 21:55:40

ansaurus

tags:

views:

answers:

Using JQuery to open a popup window and print

related questions