ajax notification alert popup or sound when new data insert into mysql

Question

I have a website which sells some products to customer.

I want to have a alert notification popup or sound when ever a new order is inserted into mysql db.

I was searched several hours to find a solution with ajax but i'm new to ajax implementation stuck now.

I don't need a complicate method if i can get only a notification it would be ok for me.

If anyone give me hint or more detail reference or guide ... much appreciate!

This is mysql insert query:

$result2 = mysqli_query($con, "INSERT into user (emailPrefix,password1,address,address2,orderRnd,dateEmail,name5,phone, date) 
              VALUES  ('$emailPrefix','$password1','$address','$address2','$orderRnd','$dateEmail','$name5','$phone','$date')");

You could poll a server script which search orders in last minutes — JaMaBing, Dec 11 '14 at 14:37
would you give me some more specific example or hint? thanks — user3138338, Dec 11 '14 at 14:40
http://stackoverflow.com/questions/6835835/jquery-simple-polling-example — JaMaBing, Dec 11 '14 at 14:53

score 1 · Answer 1 · answered Feb 17 '15 at 06:46

ajax.js
var interval = setInterval( function() {
    $.ajax ({
        url: "user.php",
        success: function(data) {
            $("#users").html(data);
        }
    });
}, 3000);

Above syntax refreshes pages every 3 seconds. You can compare old id of table in   every 3 seconds. If new id is there eventually its new inserted values. So popup like below

 $result2 = mysqli_query($con, "SELECT id FROM user ORDER BY id ASC");
 while($rows = mysqli_fetch_assoc($result2)) {
          $NEW_id = $rows["id"];
 }

if($NEW_id > $_SESSION["OLD_id"]) {

    $_SESSION["destination_OLD"] = $id_flexi;

    echo '<audio controls="controls" autoplay>
                   <source src="beep.wav" type="audio/wav">
                   <embed src="beep.wav">
                   Your browser is not supporting audio
          </audio>';
 }

 I have same problem as yours and this is my solutions. Experts recommend other things but I have only this much knowledge.

 Good day.

score 0 · Answer 2 · answered Dec 11 '14 at 14:36

0

if($result2){
    echo '<script type="text/javascript">alert("' . $msg . '")</script>';
} // define $msg as you like

answered Dec 11 '14 at 14:36

Mohamed-Yousef

23,946
3
19
28

1

i think this script will popup to customer also? i don't want to show popup alert to visitor or customer.i only want to receive popup..thanks – user3138338 Dec 11 '14 at 14:39

score 0 · Answer 3 · edited May 17 '21 at 20:34

Try this:

Put this html audio tag & modal on a page where you want a beep sound.

<audio id="playMusic" playcount="2">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3" type="audio/mpeg">
</audio>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" onclick="javascript:window.location='dashboard.php?page=5'">&times;</button>
        <h4 class="modal-title"><i class="fas fa-bell" ></i> Incoming Order!</h4>
      </div>
      <div class="modal-body">
        <p>Find out the new order by: <a href="dashboard.php?page=5" class="text-info" >Click Here!</a></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="javascript:window.location='dashboard.php?page=5'">Take me there!</button>
      </div>
    </div>

  </div>
</div>

JS

The js code will fetch number of newly order from php page and see if there is any new order.

var old_count = 0;   
        var i = 0;
        setInterval(function(){    
        $.ajax({
            type : "POST",
            url : "<?php echo 'folder/count_new_order.php'; ?>",
            success : function(data)
            {
                if (data > old_count)
                 {

                        if (i == 0)
                        {old_count = data;} 
                        else
                        {
                                $(document).ready(function() {
                                    $("#playMusic").get(0).play();
                                });

                                $("#myModal").modal("show").on("shown", function () {
                                    window.setTimeout(function () {
                                        $("#myModal").modal("hide");                                            
                                    }, 1000);
                                });
                        
                        old_count = data;

                        }

                } i=1;
            }
        });
        },500);

count_new_order.php

As a example, the table has 12 rows already.

include('config.php'); //db connection

$sql = "SELECT count(*) as count FROM table";
$qry = mysqli_query($conn,$sql);
$rowq = mysqli_fetch_assoc($qry);
echo $rowq['count']; // output: 12

ajax notification alert popup or sound when new data insert into mysql

3 Answers3