Refresh a div on the same page after using click function

Question

I'm using a JavaScript print function that print's the predefined div of a page on click. The function is as following:

<head>
<script type="text/javascript">
function printDiv(any printable div) {      
var printContents = document.getElementById(any printable div).innerHTML;      
var originalContents = document.body.innerHTML;       
document.body.innerHTML = printContents;       
window.print();       
document.body.innerHTML = originalContents; 
} 
</script>
</head>

The printer form input method and printable div are as following:

<body>
<input type="button" class="button" onclick="printDiv('any printable div')" name="print" value="print" />
<div id = "any printable div"> On button click contents here are printed </div>
</body>

I'm also using a jQuery text marquee / scroller on the same page that performs it task based on the function:

 $(document).ready(function(){

All works fine independently. The problem is that the text marquee / scroller stops scrolling the text when the print button is clicked. The scroller can't scroll the text until the page is refreshed. So I'm using html meta refresh but that may be an annoying experience to the visitors. I don't want to use the scroller in an iframe too.

I've tried some jQuery and JavaScript based solution by this time. The scripts refresh (Just fades in and out the whole block of texts) the div where the scroller is silently but actually can't keep the text scrolling.

Is there any good jQuery or JavaScript based solution available that refreshes the scroller div silently based on the situation I explained above in a given period of time?

score 0 · Answer 1 · answered Jul 11 '12 at 12:06

0

You cannot have spaces in your variable name. function printDiv(any printable div) is a syntax error.

Try instead:

function printDiv(elId) {      
    var printContents = document.getElementById(elId).innerHTML;      
    var originalContents = document.body.innerHTML;       
    document.body.innerHTML = printContents;       
    window.print();       
    document.body.innerHTML = originalContents; 
}

answered Jul 11 '12 at 12:06

Austin

6,026
2
24
24

Yes, I know that. Write it that way for easy understanding only. Thanks, – Klanto Aguntuk Jul 11 '12 at 12:49

score 0 · Answer 2 · edited May 23 '17 at 12:12

I assume from what you've stated that the intention here is to be able to print only a certain div, rather than an entire page. If that is the case then you are really going to extremes here to perform this function.

If you just want to make a prettier version of the page to print (one without menus, etc) look at How can I have different CSS when I print or print preview?. That question will show how to use a different set of css for printing, so you can set display:none; to anything that you don't want to display when printing.

If you want to print only a single div then you could look at the jQuery print element plugin. This is a simple js file that you link in your html then call

$([selector]).printElement();

to print just that element. Eg you could rewrite your method as so:

function printDiv(anyPrintableDiv) { 
    $('#' + anyPrintableDiv).printElement();
}

This is really very strange that when I use `jquery.printElement.min.js` plugin hosted on github the print function works perfectly but when it is hosted on my server the print function doesn't work. Any idea why it may happen? Please see my answer. Thanks, — Klanto Aguntuk, Jul 12 '12 at 12:48

Refresh a div on the same page after using click function

2 Answers2