Close modal button is not working after I print the modal content

Question

I have print button on modal to print the content of modal. but after clicking the print button data print correctly but then close modal and cancel modal do not work.

This is my function for printing the data:

var printContents = document.getElementById('print_data').innerHTML;  
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();
document.body.innerHTML = originalContents;

After this I could not close the modal.

Answer 1

var printContents = document.getElementById('print_data').innerHTML;  
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();
document.body.innerHTML = originalContents;
setTimeout(function() {
                location.reload();
           }, 1000);
}

Answer 2

When you change the page's HTML, your registered event to the button is gone too. So, you need to re-attach the event to the button.

---

A better approach is using CSS to hide your content, don't overwrite it, as the below comment.

Answer 3

You can do it using any one of the following method:

1) Use .on() method as following:

$('.closeButton').on('click',function(){
    // do your stuff
    // You need to call close model function as per the model js you have used
  });

2) Use .delegate() method as following:

$('body').delegate('.closeButton','click',function(){
    // do your stuff
  });

3) You can bind click event after replacing HTML as following:

$('.closeButton').bind('click');

Answer 4

Based on DucFilan's and Frankusky's suggestions,

After getting the data which is needed to be printed, append that data to some div and hide other elements expect the div to which you appended the data. And after printing the data, show hidden elements and hide the data div like below,

  var printContents = document.getElementById('print_data').innerHTML;
  document.getElementById('printContents').innerHTML = printContents;
  var allElements = document.body.children;
  for(var i = 0; i < allElements.length; i++) {
    if(allElements[i].getAttribute('id') !== "printContents") {
        allElements[i].style.display = "none";
    }
  }

  window.print();

  for(var i = 0; i < allElements.length; i++) {
    if(allElements[i].getAttribute('id') !== "printContents") {
        allElements[i].style.display = "block";
    } else {
        allElements[i].style.display = "none";
    }
  }

Working example - https://jsfiddle.net/totpvcrh/1/

Note: In the fiddle, after closing the print dialog, you will get message below the open modal button. No need to bother about that. In website it is working fine.

Answer 5

The code below simply clone the element you want to print and drop it inside a new div with ID called PrintSection. Note its not necessary for you to create a div with id of PrintSection as the JS code is design to handle the create authomatically

css for the new div PrintSection

@media screen {
              #printSection {
                  display: none;
              }
            }

            @media print {
              body * {
                visibility:hidden;
              }
              #printSection, #printSection * {
                visibility:visible;
              }
              #printSection {
                position:absolute;
                left:0;
                top:0;
              }
            }

Js to handle the cloning and hiding of other elements

function printDiv(divName) {
    var elem = document.getElementById(divName)
    
    var domClone = divName.cloneNode(true);
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.style = "width: 100%;";
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}

Answer 6

I know this question was asked several years ago but to help solve this issue with modals close button not functioning after print dialog, here is a very simple solution I ended up with.

STEP 1: Add a display property d-print-none as a class to all elements you don't want in the print layout.

STEP 2: Create a <div id="printable-contents"> and add a display property d-print-block to it

STEP 3: Use this function which is a modified version of the function you are already using to print your elements. NB: You can pass your modal id to the function, hide it, print and then show it to the user

function printElements(element,modal) {
$('.modal').modal('hide'); //Hide all modals to prevent greying out contents

var printContents = document.getElementById(element).innerHTML; // Get printable contents

$('#printable-content').html(printContents); // Populate the printable element

// Wait a while a print your contents
setTimeout(function(){
    window.print();
    $('#printable-content').html(''); // Clear the printable contents
    $('#'+modal).modal('show'); // Show the modal 
},250);

};

Link to display property classes as exampled by Bootstrap 5