Как показать последние уведомления в jQuery / php / mySQL?

Предположим, что в базу данных вставлена ​​новая строка. Как я могу отображать уведомление один раз в div и после его закрытия он не появляется снова? Я знаю, что не могу использовать setInterval , потому что он продолжает выскакивать через интервал (скажем, 10 секунд). Моя идея состоит в том, что он проверяет наличие обновлений каждые 10 секунд, и если есть новая строка, он будет отображать уведомление, но после нажатия «x» он закрывается. Через 10 секунд он снова проверяется, и теперь он проверяет, совпадает ли идентификатор строки с предыдущим или нет. Если нет, то отобразите новый тост.

Поэтому я использовал функцию setTimeout и снова вызвал ее.

  (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); })(); 

Борьба с ним уже давно. Любая помощь оценивается.

РЕДАКТИРОВАТЬ! Итак, как указано ниже в ответах. Я добавил новую колонку в DB, ​​которую вы видели. Значение по умолчанию равно 0. Если я правильно понимаю, тогда мне нужно будет изменить увиденное = 0 на 1, как только появится уведомление, так что он больше не будет цикл и покажет мне бесконечное количество одного и того же уведомления.

Это то, что у меня есть на данный момент:

  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"); } 

Мои два файла PHP: fetchResults.php и 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(); ?> 

Я не могу разобраться. Я знаю, что мне нужно передать правильный идентификатор строки уведомления updateResults.php.

Способ, которым я его реализую, – это

  1. Добавьте столбец (INT) по имени или что-то, что вам нравится, согласно вашему требованию.
  2. установлено значение по умолчанию 0.
  3. отображать уведомление для всех невидимых строк, то есть, значение seen =0;
  4. обновите столбец, обозначенный как 1 для всех строк, которые seen=0 после отображения уведомления.
  5. это все .

И часть jQuery

  1. сначала создайте функцию, позволяющую сказать fetch_notification() включая ajax, чтобы выбрать строки, где seen=0
  2. затем создайте другую функцию, чтобы сказать update_notification() чтобы обновить каждую строку, которая seen=0 чтобы seen=1 .
  3. затем после интервала вызывается fetch_notification()

ОБНОВИТЬ

другая идея
Создайте таблицу и добавьте новые уведомления в таблицу и удалите каждую строку, когда уведомление будет отображаться или закрываться пользователем

скажем, если вы хотите дать уведомление администратора о новом пользователе

  1. Добавьте каждый новый идентификатор пользователя в новую таблицу.
  2. когда администратор нажимает «Закрыть» в каждом уведомлении, удаляйте каждую соответствующую строку один за другим

Часть jQuery

  1. Проверьте, больше ли номер строки таблицы (новая таблица уведомлений), чем один, используя ajax, если его более одного отображает все идентификатор пользователя для администрирования в качестве уведомления.
  2. если администратор нажимает «Закрыть» для уведомления, удалите строку с помощью другого ajax.
  3. Поэтому вам нужно создать функцию, чтобы часто проверять, больше ли количество строк больше одного.
  4. И еще одна функция, использующая ajax для удаления строк, и должна работать только тогда, когда администратор щелкнет x (закрыть).

Эта идея лучше, так как она не дает большой нагрузки на серверную сторону (на самом деле вообще не загружается).

основными функциями базы данных являются вставка, удаление и проверка номера строки

Создайте глобальную переменную, в которой вы сохраните последний идентификатор:

 var lastID; 

Затем внутри вашей функции, в соответствии с вашим комментарием и предполагая, что данные содержат идентификатор новой строки, просто проверьте:

 if (lastID != data) showNotification(); // update lastID lastID = data; 

Попробуй это,

скрипка здесь https://jsfiddle.net/yacbnvhq/

место _notify(_txt, _id, _callback1, _callback2) в вашем обновлении код за 10 секунд

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