CODEWITHSUNDEEP
javascriptphpjqueryhtml
Surfer87
Surfer87

Reputation: 21

Webpage Print button not working

I am very new to jQuery and html, and I am trying to make a print button on my webpage. I get the little print image to show up, but clicking on the image does nothing. My cursor doesn't even change when my mouse hovers over the image. I have a jQuery function that is supposed to handle the logic for printing. Can anyone see what I am doing wrong?

Here is the code that I have so far:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="PoliticsHTML_CSS.css" type="text/css"/>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<title>Display HTML Table</title>

<script>
$('.printMe').click(function(){
     window.print();
});
</script>

</head>
<body>

<?php
  error_reporting(E_ALL); 
  ini_set('display_errors', 1);

$con=mysqli_connect("******","*****","***", "***");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}


$sql = "SELECT * FROM PoliticsPoll";
$result = mysqli_query($con, $sql);

echo "<table border='1' class='pure-table-bordered'>
<tr>
<th>ID</th>
<th>Politics Poll Question 1</th>
<th>Politics Poll Question 2</th>
<th>Politics Poll Question 3</th>
<th>Politics Poll Question 4</th>
<th>Politics Poll Question 5</th>
<th>Politics Poll Question 6</th>
<th>Politics Poll Question 7</th>
<th>Politics Poll Question 8</th>
<th>Politics Poll Question 9</th>
<th>Politics Poll Question 10</th>
</tr>";

echo "</table>";

mysqli_close($con);
?>

<img src="print.png" class="printMe" alt="Print" title="Print"></a>

</body>
</html>

Upvotes: 0

Views: 1390

Answers (3)

dave
dave

Reputation: 64725

Most likely it is because the printMe element doesn't exist yet, you need to wait until it has loaded:

$(document).ready(function() {
   $('.printMe').click(function(){
     window.print();
  });
});

That tells it to wait until the document has loaded to bind the event handler.

Upvotes: 0

mador
mador

Reputation: 1223

you add the "click"-handler to a DOM-element that doesn't exists (now). move your <script> after the <img> and before </body>.

Upvotes: 1

Azox
Azox

Reputation: 1940

You don't realy need to use Jquery for this, try changing your print button to this:

<script>
    function Print () {
        window.print()
    }
</script>

<img src="print.png" class="printMe" onClick="Print()" alt="Print" title="Print"></a>

Upvotes: 0

Related Questions