CODEWITHSUNDEEP
javascriptjqueryajax
Thej
Thej

Reputation: 211

Is there any approach to print particular div using Ajax

I want to print particular div using Ajax/Jquery, As of now I am using below Javascript function, But it screws up all the dynamic functionality of the page: buttons etc,

JSP:

    <div id="printableArea">content</div>
<input class="printButton" type="button" value="Print" name="print"
            onclick="printDiv()">

<script>
    function printDiv() {
        var printContents = document.getElementById("printableArea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>

Please let me know how to solve this, I am not able to find any proper JQuery code(working).

Upvotes: 1

Views: 445

Answers (3)

RickShaw
RickShaw

Reputation: 311

I don't know but it seems like you are overwriting your body contents with these lines in the code:

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

Upvotes: 0

zozo
zozo

Reputation: 8602

The problem is that you are replacing your body content, with the content of the div you want to print.

This of course generates a number of problems and may be hard to fix, one of them being the one pointed out by @Alexander Capone.

So, instead of doing that, you can:

  1. Open a pop-up, fill it with the desired content, print (personally I prefer this one although is less popular).
  2. Use @media print.

You can find exactly how to do each here: How to print selected div instead complete page (first 2 answers).

Upvotes: 1

Alexander Capone
Alexander Capone

Reputation: 558

From your description, I can assume that 'Screws up dynamic functionality' means that some custom jquery events, such as mouseover, click events stopped working after you re-inserted the HTML. If this is the case, problem is hiding in the way you attached those events to HTML elements. Instead of attaching event like this:

$('.some-class').click(function(){ 
    //do logic;
})

You should attach event on a document element, so page knows how to delegate event to any html element in any point of discrete time.

$(document).on('click', '.some-class', function () {
    //do logic;
})

Upvotes: 0

Related Questions