Printing multiple divs

abu117 · 11-28-2012, 10:55 PM

Hello - fairly new to javascript - am hoping someone can help?

I am using this script:

Code:

<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>

And then this HTML:
[HTML]<div id="div_print">
<img src="service/the-original-29.95-oil-change.jpg" width="900" height="483"> </div>
<div class="print-button">
<span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#F00; font-weight:bold;">Please print this coupon and present to dealer at time of service</span><br /><br />
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
</div>[/HTML]

This works exactly as I hoped. The problem arrises when I try to add a second instance, for example:

[HTML]<div id="div_print">
<img src="service/the-original-29.95-oil-change.jpg" width="900" height="483"> </div>
<div class="print-button">
<span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#F00; font-weight:bold;">Please print this coupon and present to dealer at time of service</span><br /><br />
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
</div>

<br /><br />

<div id="div_print">
<img src="service/tire-rotation.jpg" width="900" height="483"> </div>
<div class="print-button">
<span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#F00; font-weight:bold;">Please print this coupon and present to dealer at time of service</span><br /><br />
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
</div>[/HTML]

No it does not work at all - both print buttons give the error: "Undefined". I was hoping to just use the same div container and just change the contents within that div.

I appreciate any help /comments that can help me out.

Thanks,

Abe

Old Pedant · 11-29-2012, 01:08 AM

This line is a KILLER:

var newstr = document.all.item(printpage).innerHTML;

document.all DOES NOT EXIST on any platforms except MSIE 8 and below. So on other platforms, that line will cause an error when the .item property is attempted.

At which time the entire function fails. *KABLOOEY*

*********

document.all has *NOT* been needed since the days of MSIE 4. 1997 or so. Are you really wanting to be compatible with a browser nobody has used in 10 years?

felgall · 11-29-2012, 01:09 AM

It is far easier to set up classes for showing and hiding the parts of the page and simply attach the appropriate classes to the page to control which piece is to print rather than recreating the entire page.

language="javascript" was killed off about 10 years ago - at the moment toy should be using type="text/javascript" so as to support IE8 and modern browsers and once IE8 is dead the correct value of type="application/javascript" can be used.

Your code copies the body of the page and then overwrites just the body with an entire generated page including a head tag that means the page you are trying to print has two <head> sections one after the other.

Plus of course the antiquated document.all calls for IE4 instead of the document.getElementById calls that all modern browsers (and even IE5) use instead (but Old Pedant already told you about that bit).

Old Pedant · 11-29-2012, 01:09 AM

And then *THESE* are killers:

Code:

<div id="div_print">...</div>
<div id="div_print">...</div>

ID values *MUST* be UNIQUE on a page.

As soon as you added that second <div> with the same ID...*KABLOOEY*.

Old Pedant · 11-29-2012, 01:53 AM

This is a mildly hacky way to do what you want without mucking with a separate window.

Code:

<html>
<head>
<style type="text/css">
@media print {
    .noprint { display: none; }
    .printme { display: block; }
}

#funk {
    width: 50%;
    border: solid red 3px;
}
.isblue { 
    border: solid blue 5px;
    background-color: lightblue;
}
#zonk {
    width: 40%;
}
</style>
<script type="text/javascript">
function printDiv( byId )
{
    // this loop could use getElementByClassName if not using MSIE8 and below
    var divall = document.getElementsByTagName("div");
    for ( var d = 0; d < divall.length; ++d )
    {
        var div = divall[d];
        div.className = div.className.replace("printme","noprint");
    }
    // now, turn "on" only one div for printing:
    var div = document.getElementById( byId );
    div.className = div.className.replace("noprint","printme");
    window.print( );
}
</script>
</head>
<body>
<div id="funk" class="noprint">
   <h1>Yowser!</h1><br/>
   Want to print me?<br/>
   <input type="button" value="Then click here!" onclick="printDiv('funk');"/>
</div>
<div class="noprint">
    Stuff that will never get printed!
</div>
<div id="zonk" class="isblue noprint">
   <h2>Coupon worth $2 million dollars!<h2>
   <br/>
   <i>Expires April 1, 1932</i>
   <br/>
</div>
<a class="noprint" href="#" onclick="printDiv('zonk'); return false;">PRINT $2,000,000 COUPON</a>

</body>
</html>

felgall · 11-29-2012, 01:59 AM

That would overwrite any classnames already on the elements.

To keep the existing classes and add a new on simply add a space and the new class name to the end of the existing class list.

You should also use a regular expression to test for the class name with a boundary on either side in order to allow for it not being the only class in the class attribute.

See http://javascriptexample.net/dom04.php for the sort of loop you'd have using getElementsByClassName that also adds that method for browsers that don't already have it.

abu117 · 11-29-2012, 02:53 AM

Old Pedant - that works just great

I'll see if I can make it work (with graphical images etc) on Friday when I can next get to it. You're a life saver.

Thanks to others who also replied, but mostly it was telling me what I was doing wrong and not offering any way of making it work...thanks again Old Pedant

abu117 · 11-29-2012, 05:40 AM

Not quite out of the woods yet it seems....

The code below works great in IE, Firefox and Safari, however in Chrome it seems to only allow me to click on one of the buttons and then the other won't work. Using Chrome Version 23.0.1271.91

This is the code I am using (received from "Old Pedant" and modified to suit my particular needs). Maybe I screwed something up?

Code:

<html>
<head>
<style type="text/css">
@media print {
    .noprint { display: none; }
    .printme { display: block; }
}

#tireRotation {
    width: 900px;
}
#oilChange {
    width: 900px;
}
</style>

<script type="text/javascript">
function printDiv( byId )
{
    // this loop could use getElementByClassName if not using MSIE8 and below
    var divall = document.getElementsByTagName("div");
    for ( var d = 0; d < divall.length; ++d )
    {
        var div = divall[d];
        div.className = div.className.replace("printme","noprint");
    }
    // now, turn "on" only one div for printing:
    var div = document.getElementById( byId );
    div.className = div.className.replace("noprint","printme");
    window.print( );
}
</script>

</head>
<body>
<div id="tireRotation" class="noprint">
   <p><img src="service/tire-rotation.jpg" width="900" height="483">
     <span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#F00; font-weight:bold;">Please print this coupon and present to dealer at time of service</span><br /><br />
     <input type="button" value="Then click here!" onClick="printDiv('tireRotation');"/>
   </p>
   <p>&nbsp;</p>
</div>

<div id="oilChange" class="noprint">
   <p><img src="service/oil-change.jpg" width="900" height="483">
     <span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#F00; font-weight:bold;">Please print this coupon and present to dealer at time of service</span><br /><br />
     <input type="button" value="Then click here!" onClick="printDiv('oilChange');"/>
   </p>
   <p>&nbsp;</p>
</div>


</body>
</html>

Old Pedant · 11-29-2012, 07:37 PM

??? Just tried your code with *NO* changes in Chrome and it worked perfectly.

My version of Chrome: Version 23.0.1271.91 m -- so same as yours apparently.

abu117 · 11-30-2012, 01:54 AM

weird...I just tried again. The first try works..any subsequent trie nothing happens. maybe a re-install of chrome then

Thanks again

abu117 · 11-30-2012, 07:46 AM

Yep, re-installed and working fine now

Old Pedant · 11-30-2012, 09:05 PM

Hmmm... doesn't instill confidence in Chrome's automatic upgrades, does it?

Glad it worked.