我们如何在jQuery / php / mySQL中显示最近的通知？

Question

Let's say there is a new row inserted into database. How can I display a notification once in a div and after closing it, it does not show up again? I know I cannot use setInterval, because it keeps popping up after an interval (let's say 10 seconds). My idea is that it checks for updates every 10 seconds and if there is a new row, it will display the notification, but after I press "x", it closes. After 10 seconds it will check again and now it will check if the id of the row is the same as previously or not. If not, then display a new toast.

So I used the setTimeout function and triggered it again.

    (function poll(){
        setTimeout(function(){
            $.ajax({ url: "ravimDataCount.php", success: function(data){
                //check if the id is the same or not here

                $("#noti-box").append('<div class="alert alert-info "><button data-dismiss="alert" class="close close-sm" type="button"><i class="fa fa-times"></i></button>New form filled out by Dr.</div>');

                poll();
            }, dataType: "json"});
        }, 5000);
    })();

Been struggling with it for a long time now. Any help appreciated.

EDIT! So as stated below in the answers. I added a neew column to DB called seen. Default value is 0. If I understand correctly, then I would need to change the seen=0 to 1 as soon the notification is displayed, so it wont loop anymore and show me infinite amount of the same notification.

That's what I have at the moment:

        function fetch_notification(){
            setInterval(function(){ 
                //GET ALL DATA WHERE SEEN=0
                $.ajax({ 
                    url: "fetchResults.php", 
                    success: function(data){ 
                        $.each(data.vormid, function(i, vormid) {
                            $("#noti-box").append('<div class="alert alert-info "><button data-dismiss="alert" class="close close-sm" type="button"><i class="fa fa-times"></i></button>New form filled out by Dr. '+data.vormid[i].arsti_eesnimi+' '+data.vormid[i].arsti_perekonnanimi+'</div>'); 
                        });
                        update_notification();

                    }, dataType: "json"}); 
            }, 5000);
        } 
        fetch_notification();   

        //UPDATE SEEN=0 to 1
        function update_notification(){
            console.log("updating");
        }  

My two PHP files are fetchResults.php and updateResults.php

fetchResults.php:

<?php
header('Content-Type: application/json');
include_once '../dbconfig.php';



$stmt4 = $DB_con->prepare("SELECT * FROM ravim WHERE seen =0 ORDER BY date_created DESC");
$stmt4->execute();
$vormid = $stmt4->fetchAll(PDO::FETCH_ASSOC);

echo json_encode(array("vormid" => $vormid));
?>

updateResults.php:

<?php
header('Content-Type: application/json');
include_once '../dbconfig.php';

$ravim_id = $_POST['ravim_id'] ;

$stmt4 = $DB_con->prepare("UPDATE ravim SET seen=1 WHERE ravim_id=:ravim_id");
$stmt4->execute();
?>

I cannot figure it out. I know I have to pass the correct row ID of the notification to updateResults.php.

Answer 1

Create a global variable where you keep the last id:

var lastID;

Then inside your function, under your comment and supposing data contains the id of the new row, just check:

if (lastID != data)
    showNotification();

// update lastID
lastID = data;