Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Printing multiple divs

    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><!--print-button-->[/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><!--print-button-->

    <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><!--print-button-->[/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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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).
    Last edited by felgall; 11-29-2012 at 01:12 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    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*.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    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>
    Last edited by Old Pedant; 11-29-2012 at 01:57 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by abu117; 11-29-2012 at 05:41 AM.

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    ??? 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Apr 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    weird...I just tried again. The first try works..any subsequent trie nothing happens. maybe a re-install of chrome then Thanks again

  • #11
    New Coder
    Join Date
    Apr 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep, re-installed and working fine now

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,410 Times in 4,375 Posts
    Hmmm... doesn't instill confidence in Chrome's automatic upgrades, does it?

    Glad it worked.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •