here is my problem I have a code that implement the window.print but the problem is when I close the window print and go back to my page my print button is not working anymore.

$(function(){
    $('#button1').click(function()
        {
          $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
           var printContents = document.getElementById('data').innerHTML;
           var originalContents = document.body.innerHTML;
           document.body.innerHTML = printContents;
           window.print();
           document.body.innerHTML = originalContents;
           //window.location = document.body.innerHTML;       
           //location.reload(); 
        });
     }); 

But when I add the location.reload() (see I ment it) the print button is working again but it loads the previous data not the current data that is why I don't want to use the location.reload(). Is there other solution or approach to my problem?

here is my problem I have a code that implement the window.print but the problem is when I close the window print and go back to my page my print button is not working anymore.

$(function(){
    $('#button1').click(function()
        {
          $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
           var printContents = document.getElementById('data').innerHTML;
           var originalContents = document.body.innerHTML;
           document.body.innerHTML = printContents;
           window.print();
           document.body.innerHTML = originalContents;
           //window.location = document.body.innerHTML;       
           //location.reload(); 
        });
     }); 

But when I add the location.reload() (see I ment it) the print button is working again but it loads the previous data not the current data that is why I don't want to use the location.reload(). Is there other solution or approach to my problem?

• javascript
• jquery

• That's because you are replacing the entire DOM inside body by overwriting .innerHTML - that will replace every element with a new element, and so you event handler that was bound to a specific element #button1 at load time is not there any more. Try using jQuery's .on instead (in the old .live way) so that the event will also be applied for new elements with the ID #button1. – C3roe Commented Jun 26, 2013 at 9:07
• And btw., what's this replacing of document content good for anyway? If you want to print only the contents of the element #data, then why don't you just hide anything else in your print stylesheet ...? – C3roe Commented Jun 26, 2013 at 9:08
• I tried this $('#button1').on('click', function but its the same. Can you give example how to hide. – user2046410 Commented Jun 26, 2013 at 9:13
• 1 That is not the "live"-version of on. Try $(document).on('click', '#button1', function() {...}) – C3roe Commented Jun 26, 2013 at 9:51
• Thanks CBroe, its really a big help and new things learned from you. – user2046410 Commented Jun 27, 2013 at 2:16

3 Answers 3

You should really be using a print-specific CSS stylesheet for this, but if you want to acplish your goal in that way, maybe this would work better:

$(function(){
    $('#button1').click(function(){
        $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
         var printContents = $( $('#data').html() );
         var originalContents = $('body > *').hide();
         $('body').append( printContents );
         window.print();
         printContents.remove();
         originalContents.show();
      });
 }); 

Make a new element using the innerHTML of the 'data' element. Hide all the children of the body tag. Append the new element to the body tag. Print. Remove the new element. Show the original contents again.

This is still kind of messy, but you shouldn't lose your events.

I fixed a similar problem by just opening a new window with only the content I wanted to print like this:

function printPage(htmlstring){

    var boiler  = "put any styling or js scripts here to make it look right";
        boiler += "<div id='print-page-content'>\n</div>\n";

    var PrintWindow = window.open("","newwin", height=600, width=800, toolbar=no, menubar=no");
    PrintWindow.document.write(boiler);
    $(PrintWindow.document).find("#print-page-content").append(htmlstring);
    $(PrintWindow).ready(function(){
        PrintWindow.print();
    });
}

Then just call it by:

printPage(document.body.innerHTML);

Thank you very much for all the answers and the response guys. I really appreciate. I just want to add answer this one is came from my friend.

First on the button add onlick="window.print()"

 <p><img src="images/printButton.gif" id="button1" width="100" height="75" onclick="window.print()"></p>

And then add css style like this

<link href = 'css/print.css' rel = 'stylesheet' style = 'text/css'  MEDIA="print, handheld"/>

Don't forget the MEDIA="print,handheld"