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.

Event are no longer attached when you reassign `.innerHTML`. — StackSlave, Aug 24 '17 at 05:41

score 3 · Answer 1 · edited Nov 26 '18 at 07:07

3

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);
}

edited Nov 26 '18 at 07:07

Suraj Rao

28,850
10
94
99

answered Nov 26 '18 at 06:54

Lado Kveladze

31
1

its work fine for me,after print or cansel process its close automaticaly after 1 second – Lado Kveladze Nov 26 '18 at 06:56

Duc Filan · Answer 2 · 2017-08-24T05:35:45.800

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.

edited Aug 24 '17 at 05:35

answered Aug 24 '17 at 05:30

Duc Filan

6,106
3
19
24

1

A workaround to dont overwrite all your DOM its to adding CSS to hide the elements that you dont want to print, like [this answer](https://stackoverflow.com/a/2618980/4637140) states. Other possible solution that I have in mind its to add all your content into an iframe and print only the iframe like [this answer](https://stackoverflow.com/a/9616706/4637140) – Frankusky Aug 24 '17 at 05:33

score 0 · Answer 3 · answered Aug 24 '17 at 06:59

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');

Sivakumar Tadisetti · Answer 4 · 2017-08-24T07:13:07.237

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.

Spywave · Answer 5 · 2022-05-16T11:59:53.790

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();
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 27 '22 at 09:16

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

5 Answers5