CODEWITHSUNDEEP
phpjquerymysqlajaxnotifications
user11119483
user11119483

Reputation: 13

show notification with php when a specific data is changed in a database

I want to notify a person a count of the jobs available in a table in my database. In a table I have a list of 8 jobs and they have their avilability. I've done the count with a PHP query with SELECT COUNT(*) AS jobs... and created this ajax script which shows the count with an interval. 

$(document).ready(function() {
  $.ajaxSetup({ cache: false }); 
    setInterval(function() {
    $('#divToRefresh').load('notification.php'); //this contains the query
    }, 30000); 
    });

However, I am not sure how I can make it so when the user sees the notifcation alert, they will close it and it doesn't appear again until there's a new available job.

I can't find anything on the good ol google either.

Upvotes: 1

Views: 6158

Answers (2)

Jay
Jay

Reputation: 3515

Your jQuery function is running in 30 seconds intervals polling data from server. notification.php returns pre-rendered HTML containing (I assume among other things) the number of jobs available.

Check the number of available jobs and show notification based on that:

setInterval(function() {
    var oldNumberOfJobs = newNumberOfJobs = 0;
    $('#divToRefresh').load('notification.php'); //this contains the query
    newNumberOfJobs = $('#divWithJobsCount').text;

    if (newNumberOfJobs > oldNumberOfJobs) {
        // show notification to the user
    }

    oldNumberOfJobs = newNumberOfJobs;

}, 30000);

To be more specific (showing/hiding notifications), I need to see your HTML.

This solution feels bulky. The whole pre-rendered HTML is being reloaded again and again. A nicer approach would be to only return the number of jobs available and only update that number using jQuery.

Also, it might be a good idea to return the latest job_id as well as the total number of jobs available. This way, you could check if the latest job_id that is already stored in the front end matches the newly received job_id. And only if they don't match you would update the counter and show new notification.

update

Here is a jsfiddle.js which covers your case. Jobs counter is simulated with current number of minutes. The function checks every 15 seconds if the number of minutes has changed. Once it happens, an alert notification is shown (but only if the old one was closed).

setInterval in jsfiddle is written using a mock object so that it is testable in the browser without AJAX requests. In your code use the following form:

setInterval(function() {
   $.get('notification.php', checkJobsCounter); // returns jobs count in plain text
}, 30000);

Upvotes: 1

void
void

Reputation: 36703

Well you need to make an AJAX call and the response of it should be the number of new notifications. Now check if num>0 then just do $("#notification").fadeIn(); which is a by default hidden div having text You have new notification (or whatever) and a close button.

$(doument).ready(function(){
    setInterval(function(){
        $.get("notification.php", function(data){
            if(data>0) 
                {
                $("#div").fadeIn();
                }
        });
    },1000);
});

Once user closes this you can create a cookie in the browser of the user and then check if cookie is set dont make ajax request, This was you dont have to update the db and every user will be able to see the notification.

Upvotes: 0

Related Questions