Reputation: 21
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
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
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
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