CODEWITHSUNDEEP
javascriptjqueryhtml
ashwin karki
ashwin karki

Reputation: 673

Print button not working on javascript to print the content of page

I tried the code(it is not running in snippet properly) or you can directly copy paste and run on text editor.If it can be changed with jquery suggest me.

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <script language="javascript">
      function PrintMe(DivID) {
        alert("here");
      var disp_setting="toolbar=yes,location=no,";
      disp_setting+="directories=yes,menubar=yes,";
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
         var content_vlue = document.getElementById(DivID).innerHTML;
         var docprint=window.open("","",disp_setting);
         docprint.document.open();
         docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
         docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
         docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
         docprint.document.write('<head><title>My Title</title>');
         docprint.document.write('<style type="text/css">body{ margin:0px;');
         docprint.document.write('font-family:verdana,Arial;color:#000;');
         docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
         docprint.document.write('a{color:#000;text-decoration:none;} </style>');
         docprint.document.write('</head><body onLoad="self.print()"><center>');
         docprint.document.write(content_vlue);
         docprint.document.write('</center></body></html>');
         docprint.document.close();
         docprint.focus();
      }
   </script>
   <style type="text/css">
      .hidden {
      display: none;
      }
   </style>
   <body>
      <script>
         var myWindow;

         function openWin(DivID) {
            var content_print=document.getElementById(DivID).innerHTML;
             myWindow = window.open("", "myWindow", "width=1000,height=1000");
             myWindow.document.write(content_print);
         }

         function closeWin() {
             myWindow.close();
         }
      </script>
      <div id="divid" class="hidden">
         Print the content of this div content in new window.
         <button type="button" onclick="PrintMe('divid')">Print</button>
      </div>
      <button onclick="openWin('divid')">Submit</button>
      <button onclick="closeWin()">Close</button>
   </body>
</html>

At first my normal page loads:

enter image description here

When i click submit button then the new window opens with the content of id="divid" .It appears as:

enter image description here

It is showing me error like:

enter image description here

Upvotes: 0

Views: 997

Answers (2)

Nikita Seliverstov
Nikita Seliverstov

Reputation: 175

It happens because pop up window is a new unique document, and it know's nothing about code on your original page. You need to add your function to a your new window. if you add script to a div which you use to generate new window you should be fine but it'not a best way to print things consider using function print()

    <div id="divid" class="hidden">
         <script language="javascript">
      function PrintMe(DivID) {
        alert("here");
      var disp_setting="toolbar=yes,location=no,";
      disp_setting+="directories=yes,menubar=yes,";
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
         var content_vlue = document.getElementById(DivID).innerHTML;
         var docprint=window.open("","",disp_setting);
         docprint.document.open();
         docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
         docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
         docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
         docprint.document.write('<head><title>My Title</title>');
         docprint.document.write('<style type="text/css">body{ margin:0px;');
         docprint.document.write('font-family:verdana,Arial;color:#000;');
         docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
         docprint.document.write('a{color:#000;text-decoration:none;} </style>');
         docprint.document.write('</head><body onLoad="self.print()"><center>');
         docprint.document.write(content_vlue);
         docprint.document.write('</center></body></html>');
         docprint.document.close();
         docprint.focus();
      }
   </script>
         Print the content of this div content in new window.
         <button type="button" onclick="PrintMe('divid')">Print</button>
      </div>

Upvotes: 1

mike510a
mike510a

Reputation: 2168

This will probably solve your problem: You can get rid of the printMe() function all together or pass the printMe() function to MyWindow via a function that is written to the MyWindow document.

<script>
         var myWindow;

         function openWin(DivID) {
            var content_print=document.getElementById(DivID).innerHTML;
             myWindow = window.open("", "myWindow", "width=1000,height=1000");
             myWindow.document.write(content_print);


             //print the window
              myWindow.print();
         }

         function closeWin() {
             myWindow.close();
         }
      </script>

Upvotes: 0

Related Questions