Hightline Hightline - 2 years ago 82
Javascript Question

Print javascript block my link

i found a little script for print a div but when i click on the button for print and i close the print window, all my dropdown list filter (isotope) and my dropdown menu is not working.

There is not event when i click

Here's my print script:


$sql = "SELECT * FROM plaquettes";
$results = $connexion->query($sql);
$plaquettes = $results->fetchAll(PDO::FETCH_OBJ);


$titreformat= $p->titre;

$titreformat = enleverCaracteresSpeciaux($titreformat);

foreach($plaquettes as $p) { ?>

<script type="text/javascript">

function printContent(el){
var restorepage<?php echo $i ?>= document.body.innerHTML;
var printcontent<?php echo $i ?>= document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent<?php echo $i ?>;
document.body.innerHTML = restorepage<?php echo $i ?>;



<?php $i++; } ?>

My html with the button

<div id="mydiv<?php echo $i ?>" class="hidden_print" >
<table class="print_header">
<td><b>Société :</b> <?php echo $p->societe ?></td>
<td><img src="img/<?php echo $p->societe ?>logo.png" alt="Logo de la société"></td>
<div >
<h1><?php echo $p->titre ?></h1>

<li><b>Client :</b> <?php echo $p->client ?></li>
<li><b>Département :</b> <?php echo $p->departement ?></li>
<li><b>Domaine :</b> <?php echo $p->domaine ?></li>
<li><b>Année de commande : </b><?php echo $p->annee ?></li>
<li><b>Montant : </b><?php echo $p->montant ?>€</li>
<li><b>Prestations : </b><?php echo $p->prestation ?></li>
<li><p><b>Détails : </b><?php echo $p->detail ?></p></li>

<img src="img/<?php echo $p->image ?>" alt="Photo des prestations">


<button id="buttonaprime" onclick="printContent('mydiv<?php echo $i ?>')" class="buttonaprime no-print"><i class="fa fa-print" aria-hidden="true"></i> Imprimer la plaquette</button>

Thanks you !

Answer Source

Use this css and use onclick="addPrintClassAndPrintDiv(divId)" in print button.

We are making all element hidden and element(div) with class .print-div only visible for printing screen. So that will only print those div with class .print-div

Use this css and javascript-jquery Function:


@media print {
  //If your div always will fit in one page. 
  body {

  body * {
    visibility: hidden;
  .print-div, .print-div * {
    visibility: visible !important;

Javascript function Not in php loop:

function addPrintClassAndPrintDiv(divId) {

   //remove .print-div class from all element if any 

   //add .print-div class to that div you want to print

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download