Using JQuery to open a popup window and print

Question

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    lt a class  readmore  href  view-details php Id 11  gt TJ Kirchner lt  a gt    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       lt  0  amp  amp  options data                   amp       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

User · Accepted Answer

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(); 
});

User · Answer

Are you sure you can t alter the HTML in the popup window   If you can  add a  lt script gt  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

User · Answer

Got it   I found an idea here  http   www mail-archive com discuss jquery com 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

[javascript] Using JQuery to open a popup window and print

Examples related to javascript

Examples related to jquery

Examples related to printing

[javascript] Using JQuery to open a popup window and print

Examples related to javascript

Examples related to jquery

Examples related to printing

Examples related to popup

Examples related to lightbox