I'm having problems with a page that reads the last values entered in the DB of a particular counter. The page has a section that is constantly refreshed (Scores) and the idea is to play a sound every time there are changes in the DB the problem is that it is always playing the way I am doing.
Here's my code:
<?php
// Dados do banco
$numA=0;
$numB=0;
$server = "egcubosserver";
$options = array( "UID" => "sa", "PWD" => "Avintes@08", "Database" => "Atendimento");
$conn = sqlsrv_connect($server, $options);
$sql = "SELECT max(numero) as maximo from fila";
$query = sqlsrv_query($conn, $sql);
$row = sqlsrv_fetch_array($query);
$sqlA = "SELECT max(numero) as maximo,balcao as balcao
from fila
where balcao ='A'
Group by balcao";
$queryA = sqlsrv_query($conn, $sqlA);
$rowA = sqlsrv_fetch_array($queryA);
$sqlb = "SELECT max(numero) as maximo,balcao as balcao
from fila
where balcao ='B'
Group by balcao";
$queryb = sqlsrv_query($conn, $sqlb);
$rowB = sqlsrv_fetch_array($queryb);
//$sqlinsert = "INSERT INTO [Atendimento].[dbo].[fila]([numero]) VALUES($num)";
//sqlsrv_free_stmt($sqlinsert);
$file='beep.mp3';
$numa=$rowA['maximo'];
$numb=$rowB['maximo'];
$a=$_GET['id'];
file_put_contents("text1.txt",$a);
?>
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Business Casual - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<!--<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script></head><body><divclass="brand">MGC-Transportes</div>
<div class="address-bar">Por favor, aguarde a sua vez.</div>
<div class="container">
<?php
file_put_contents("text.txt",$numa);
if ($numA<$rowA['maximo'] || $numB>$controloB)
{
//echo "<audio controls autoplay='autoplay' style='display:none'><source src='beep.mp3' type='audio/mpeg'></audio>";
}
?>
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/slide-1.jpg" height="20">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-2.jpg" height="20">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-3.jpg" height="20">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<div id="scores">
<?php
if ($row['maximo']==NULL)
{
$balcaoA='A';
$balcaoB='B';
$num=0;
$numA=0;
$numB=0;
}
else
{
$controloA=$numA;
$controloB=$numB;
//file_put_contents("text.txt",$numa);
$num=$row['maximo'];
$numA=$numa;
$numB=$numb;
}
?>
</h2>
<div class="col-lg-6 text-center">
<h1><?php echo ("Balcão")?>A<h1>
<hr class="tagline-divider">
<h2>
<?php
echo "Número:".$rowA['maximo']."";
?>
</h2>
</div>
<div class="col-lg-6 text-center">
<h1><?php echo ("Balcão")?>B<h1>
<hr class="tagline-divider">
<h2>
<?php
echo "Número:".$rowB['maximo']."";
?>
</h2>
</div>
</div>
<script>
var $scores = $("#scores");
var $a = "<?php Print($numA); ?>";
setInterval(function () {
$scores.load("index.php #scores");
}, 3);
</script>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © MGC-Transportes</p>
</div>
</div>
</div>
</footer>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>