Generate HTML-page dynamically using Javascript

2 Views

I have a list of elements where I want the user to be able to print just the clicked element, and not the whole surrounding page. The elements looks as follows: 

<div class="element" id="#element1">Element 1</div>
<div class="element" id="#element2">Element 2</div>
<div class="element" id="#element3">Element 3</div>

To be able to print just the element the user clicks, I use this code to fetch whatever element is clicked:

Read More
jQuery(document).ready(function($) {
    $( '.element' ).click(function() {
        var clickedEl = $(this).attr('id');
        printDiv( clickedEl );
        return false;
    });
});

The id of the clicked element is then passed on to a function, creating a very simple HTML-page for print: 

function printDiv(id) {    
    var printContents = document.getElementById(id).innerHTML;
    var printContentsBefore = '<html><head>
    <link rel="stylesheet" href="/css/blabla_print.css" type="text/css" />
    </head><body><table><tr>';
    var printContentsAfter = '</tr></table></body></html>';
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContentsBefore + printContents + printContentsAfter;
    //document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

The code sort of works, but I’m having two problems:

  1. The print window that pops up contains the data of the clicked element about half of the times. The other half the window is empty. How can that be, and how do I solve it?
  2. In the generated page I’m trying to load a CSS-file to format the way the content looks, but without any luck. Is what I’m trying to do here at all possible, and if so how?

And in case it’s relevant; the code is being used on a WordPress-based page.

Thanks!

Post Views: 2

Related posts

1 comment

  1. I will never understand why people waste so much effort getting an element’s ID, only to then use getElementById to get the element that they already had again…

    $(".element").on("click",function() {
    printDiv(this);
});

function printDiv(elem) {
    var before = '...',
        after = '...',
        result = before + elem.innerHTML + after;
    // now do stuff
}

    It’s worth noting that window.print() does not necessarily fire immediately. It’s not synchronous. It just tells the browser that it should bring up the Print box. Therefore, resetting originalContents back on your content may or may not mess it up, as you have seen.

    You may wish to have a “Cancel” button, styled with

    @media print {
    .cancelbutton {display:none}
}

    Which does the actual reset.

    Another note is that you are nuking the innerHTML of the page. Any event handlers that you may have will be completely annihilated, except on the body element itself. Just be aware of that.

    Personally I would suggest a different method, one that would involve opening a new window/tab with just the content to be printed (you can open a window and document.write to it, for example).

Comments are closed.