How Can We Show Recent Notifications In JQuery/php/mySQL?

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

Solution 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

Solution 2:

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;

Solution 3:

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" />