Using JQuery to open a popup window and print

javascript jquery printing popup lightbox

126,071

Solution 1

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()">

$(document).ready(function () { 
  window.print(); 
});

Solution 2

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.

126,071

Author by

TJ Kirchner

I'm a web developer with experience writing web applications and sites for desktop and mobile devices in an Agile environment. Recently I've been developing charts and dashboards for our Passive Vulnerability Scanner product. In my previous job in the mobile advertising industry I had the opportunity to develop mobile rich media units, create test automation suites, and build enterprise web applications. Furthermore, I've worked closely with our marketing department and designers to create webpages, online sales letters, web events, membership websites and much more.

Updated on August 21, 2020

Comments

TJ Kirchner over 3 years
A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple:
```
$('.readmore').each(function(i){
    $(this).popup();
});
```
and the link would look like this:
```
<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>
```
The plugin could also accept arguments for width, height, a different url, and more data to pass through.

The problem I'm facing right now is printing the lightbox. I set it up so that the lightbox has a print button at the top of the box. That link would open up a new window and print that window. This is all being controlled by the lightbox plugin. Here's what that code looks like:
```
$('.printBtn').bind('click',function() {
    var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
    var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
    thePopup.print();
});
```
The problem is the script doesn't seem to be waiting until the window loads. It wants to print the moment the window appears. As a result, if I click "cancel" to the print dialog box, it'll popup again and again until the window loads. The first time I tried printing I got a blank page. That might be because the window didn't finish load.

I need to find a way to alter the previous code block to wait until the window loads and then print. I feel like there should be an easy way to do this, but I haven't found it yet. Either that, or I need to find a better way to open a popup window and print from the lightbox script in the parent window, without alternating the webpage code in the popup window.
TJ Kirchner about 14 years

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 about 14 years

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
Ivo Sabev about 14 years

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.
TJ Kirchner about 14 years

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.
Ivo Sabev about 14 years

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.