Home » Php » Auto refreshing div and new row data with sound alert

Auto refreshing div and new row data with sound alert

Posted by: admin September 25, 2018 Leave a comment

Questions:

I have the following piece of code for auto-refreshing a row. I would like to play a sound alert only if there is an incoming new entry in my database.

The new row updates, the alert message runs, but the notification sound auto replays regardless of whether the database entry is new. I am having difficulty determining:

  1. Why the audio replays regardless of whether the database entry is new, and
  2. How to make sure the audio message plays based only on some value retrieved from my database (like, timestamp or id, for example)

Below is my code:

HTML Code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    </head>
    <body>

<!-- New Posts -->
    <div id="newposts"></div>

    </body>
    </html>

JavaScript Code: with findBootstrapEnvironment function

<script language="javascript">
    var env = findBootstrapEnvironment();

var audioElement = new Audio();


function playAlert(ignore_checked) {
    if (ignore_checked || (document.getElementById('play_sound') && document.getElementById('play_sound').checked)) {
        if (!document.contains(audioElement)) {
            document.body.appendChild(audioElement);
        }

        if (audioElement.canPlayType("audio/mp3")) {
            audioElement.src = 'notify.mp3';
        } else if (audioElement.canPlayType("audio/wav") || audioElement.canPlayType("audio/x-wav")) {
            audioElement.src = 'notify.wav';
        }

        if (audioElement.currentTime) {
            audioElement.currentTime = 0;
        }

        audioElement.play();
    }
}


    function updateHistory() {
        var datastring = '';
        jQuery.ajax({
            type: 'GET', url: 'connect.php', data: datastring,
            success: function (server_response) {
                if (server_response != '1') {
                    $('#newposts').html(server_response);
                    if (server_response.length = 0)    return;

                    document.getElementById('updatewarning').innerHTML = '<p><strong>There have been updates to this page.</strong> Please view the updates.</p>';
                    document.getElementById('updatewarning').style.display = 'block';

                    var title = document.title;
                    title = title.replace("UPDATED - ", "");
                    document.title = "UPDATED - " + title;
                    playAlert();
                }
            }
        });

        setTimeout("updateHistory()", 20000);
    }

updateHistory();


    function findBootstrapEnvironment() {
        var envs = ['xs', 'sm', 'md', 'lg'];

        var $el = $('<div>');
        $el.appendTo($('body'));

        for (var i = envs.length - 1; i >= 0; i--) {
            var env = envs[i];

            $el.addClass('hidden-'+env);
            if ($el.is(':hidden')) {
                $el.remove();
                return env;
            }
        }
    }
</script>

PHP file Code: I created db with single table (events)

<?php
$host="localhost";  //Mysql Database Host Address
$username="root";       //Database Username
$pass="";           //Database Password
$dataname="testdb";     //Database Name

$connect = mysqli_connect($host, $username, $pass)
or die("Could not connect: " . mysql_error());
mysqli_select_db($connect, $dataname) or die(mysqli_error($con));

$sql = "SELECT * FROM events ORDER BY id DESC";

$result = mysqli_query($connect, $sql);

 print "
<div><ul>";

        while($row = mysqli_fetch_array($result))
        {
            echo "<li><span>" . $row['time'] . "</span></li>"; // Things that you want to fetch
        }

 echo "
</ul></div>";

 ?>
Answers: