Question 29759 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress doesn't let me use my print button

I’m having a problem with my WordPress…

I want to add a print button on my page that prints an image on my page. But every tutorial I find just doesn’t work on WordPress, although working on Codepen, Stackoverflow replies, or on local html files on my laptop…

For exemple, this code works perfectly, but not on my page. I tried putting the HTML code in a HTML section and the JS in the page settings of Elementor. I’ve also tried putting everything in the HTML.

I can’t seem to find a solution. Maybe WordPress blocks my Javascript ?

If someone could help me, you’d be my lifesaver! Thank you

Code pen code (that i have adapted for my image):

<table border="1" cellpadding="3" id="printTable">
    <tbody><tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>
<br />
<br />
<table border="1" cellpadding="3" id="notPrintTable">
    <tbody><tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>       
        <td>000</td>
    </tr>
</tbody></table>
<br />
<br />

<button>Print me</button>

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})
Tags:

2

Answers


  1. 0

    try to add jquery 3 cdn and check if works

    Login or Signup to reply.
  2. 0

    You’re doing a basic mistake here. In WordPress, $ will give you undefined. you’ll have to use jQuery to access the jquery object in WordPress.

    So whenever you work with WordPress jquery either wrap your Js code withing document.ready

    jQuery( document ).ready( function( $ ) {
// Your code goes here.
} );

    or you can wrap it within a function like this:

    ( function( $ ) {
// Your code goes here.
}( jQuery ) );

    Then you can use $ since we have passed in function as jQuery reference(I don’t know what should I call it reference or something else, Correct me in the comments please)

    So your code should be like this:

    ( function( $ ) {
    function printData() {
        const divToPrint = document.getElementById( 'printTable' );
        const newWin = window.open( '' );
        newWin.document.write( divToPrint.outerHTML );
        newWin.print();
        newWin.close();
    }

    $( 'button' ).on( 'click', function() {
        printData();
    } );
}( jQuery ) );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search