CODEWITHSUNDEEP
javascriptjqueryhtml
Vasilis Greece
Vasilis Greece

Reputation: 907

jquery multiple selectors in print function

Html:

<div id="firstline">
    <div class="col-md-3">
        <a href="/"><div id="logo">Flooring</div></a>
    </div>
 ...
</div>
<div class="col-md-2">
    <ul>
    ...
      <li>
        <button id="printall"><b class="fa fa-print"></b> Print</button>
      </li>
    </ul>
</div>
<div id="detailarea" class="col-md-12">
...
</div>

Jquery:

jQuery(document).ready(function($){
...
 $("#printall").click(function(){
    $('#logo, #firstshow, #detailarea').print();
 });
});

I am trying to print the above id's alltogether in the same page but it reconizes only the first id #logo and prints only the logo. What can I do to fix this?

Upvotes: 2

Views: 150

Answers (3)

BarthesSimpson
BarthesSimpson

Reputation: 954

 $("#printall").click(function(){ 
    var printThis = $('<div/>');
    $('#logo').clone().appendTo(printThis);
    $('#firstshow').clone().appendTo(printThis);
    $('#detailarea').clone().appendTo(printThis);
    $(printThis).print();
});

But this won't clone any dynamic content, like if they've entered text somewhere.

Upvotes: 0

anyeloamt
anyeloamt

Reputation: 163

I think you have to create a new page, then append the content of the containers you want to print, then print it.

Something like:

$("#printall").click(function(){

    $('#logo, #firstshow, #detailarea').each(function(){
         $('#new-container').append($(this).html());
    });

    $('#new-container').print();
});

Upvotes: 1

kpbl
kpbl

Reputation: 24

try in jquery:

$("#printall").click(function(){
    $('#logo, #firstshow, #detailarea').each(function(){
       $(this).print();
    };
});

Upvotes: 0

Related Questions