How can we show recent notifications in 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

The way I know to implement it is

1. Add a column(INT) named seen or something you like according to your requirement.

2. set seen to default values 0.

3. display the notification for all the rows which are unseen , ie., value of seen =0;

4. update the column seen as 1 for all the rows that have seen=0after displaying the notification.

5. that's all .

   
   

And the jQuery part is

1. first create a function lets say fetch_notification() including the ajax to select the rows where seen=0
2. then create another function lets say update_notification() to update each rows which have seen=0 to seen=1.
3. then after an interval call fetch_notification()

UPDATE

another idea is
Create a table and add new notifications into a table and delete each rows when the notification is displayed or closed by the user

lets say if you want to give admin notification about new user

1. Add each new user id into a new table .
2. when admin clicks close in each notification delete each corresponding row one by one

jQuery part

1. Check if the row number of the table(new notification table) is greater than one using ajax, if its greater than one display all the user id to admin as notification.
2. if admin clicks close for a notification ,delete the row using another ajax.
3. So you need to create a function to frequently check if the number of rows are greater than one .
4. And another function using ajax to delete the rows and it need to work only when the admin click x (close).

This idea is better since it doesn't give much load on the server side (actually speaking no load at all.).

main database functions are insertion,deletion and checking row number

Answer 2

Try this,

fiddle here https://jsfiddle.net/yacbnvhq/

place _notify(_txt, _id, _callback1, _callback2) in your update 10 seconds code

var newRowCollection = []; //this is your row id collection


$('input').on('click', function() {

  _notify('Hello Bucky', '22', function() {
    alert('Showing!!');
  }, function() {
    alert('Completed!!');
  });

});


_notify(); //calling toast without any values



function _notify(_txt, _id, _callback1, _callback2) {

  if (newRowCollection.indexOf(_id) == -1) {
    $('#toastNotifier').remove();

    _id !== undefined ? newRowCollection.push(_id) : '';

    var toastNotifier = $('<div id="toastNotifier"></div>'),
      toastText = $('<div class="toastText"></div>'),
      toastBt = $('<div class="toastButton">&#x2715;</div>');
    _txt == undefined ? _txt = 'Just Saying hi!!' : '';

    toastNotifier.append(toastText.html(_txt)).append(toastBt);


    toastNotifier.css({
      'display': 'none',
      'background': '#2D2D2D',
      'position': 'absolute',
      'left': '10px',
      'bottom': '-50px',
      'border': '1px solid # 000',
      'box-shadow': '0px 0px 13px rgba(0, 0, 0, 0.42)',
      'border-radius': '6px'
    }).find(toastBt).css({

      'display': 'inline-block',
      'padding': '15px',
      'font-weight': 'bold',
      'color': '#737373',
      'cursor': 'pointer'
    }).end().find(toastText).css({

      'display': 'inline-block',
      'padding': '15px 10px',
      'text-transform': 'uppercase',
      'color': '#fff'
    });

    $('body').append(toastNotifier);


    toastNotifier.show().animate({

      bottom: '30px'

    }, {
      complete: function() {

        if (_callback1 !== undefined && typeof _callback1 === "function") {
          _callback1();
        };

      }
    });


    toastBt.on('click', function() {

      if (_callback2 !== undefined && typeof _callback2 === "function") {
        _callback2();
      };
      toastNotifier.remove();
    });
    //if statement closed here
  } else {

    alert('Row Id exists!!');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Click Me" />

Answer 3

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;