I've been having some issues with JQuery and PHP recently. I've been creating a webpage that has a button and a number of times that button has been pressed by anyone ever. Currently, I'm working on using JQuery and PHP to make the button press count updates 4 times a second.
Here is a peek at the code:
index.php:
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(document).ready(function(){
/* This function is for refreshing the total clicks number to make it live */
setInterval(function reload() {
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 250);
});
</script>
<script>
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
reload.php:
<?php
$my_file = 'clicks.txt';
$handle = fopen($my_file, 'r');
$value = fread($handle,filesize($my_file));
echo $value;
?>
In the JQuery section, there is a log to the console, but when I go to the website, nothing appears in the log, so I assume that the JQuery section gets skipped completely for some reason. Although, there are no errors in the console, so that makes the issue harder to identify...
If you want a look at the website, here is the address, but the uptime isn't exactly stellar, so don't be alarmed if you can't access the website.
Your code is not working because you are defining some part of the logic in the script that that loads the jQuery library. The content of the script tag is discarded and replaced by the content of the URL listed as src attribute.
So you need to move the $(document).ready() to the second block. While you are at it, all of your code should be defined in the ready block anyway for safety since otherwise you can't really control precisely when it will be executed.
Finally, as Ken Franqueiro and Kaleb Klein pointed out, refreshing your data every 250ms will kill your server.
For any of those having the same problem, here is the solution I came up with thanks to Guillaume Bodi, Ken Franqueiro, and Kaleb Klein:
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script>
$(document).ready(setInterval(function(){
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 2000));
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
To sum up what I did, I got rid of the unnecessary extra function and put the script source in the head. Also, I slowed the reload to once every two seconds.
If needed, I'll slow it down more, but that creates an issue. If I have a client click the button, and the count doesn't change for several seconds, we get what is known as lag. I plan to fix this issue by assumptions on the client's part.
By "assumptions", I mean that I'll have the client notify the server that they clicked the button, then have the client add one to their count. Then, after a few seconds, the server will respond with the new number of total clicks which will include the number of clicks from other clients. The new number will update on the client, and all will be well.
Hopefully, that all made sense, but it really doesn't need to. It's not really important, just some of my own plans and theories.