How to create a facebook -like notification badge

JavaScript
#1

Hello I am trying to create a notification badge. Every time a new item is added to my list the badge counter will add one. I have started a code but the results are not the expected.

			function buildBadge () {
				var badgeContainer = document.getElementById('services');
		     	//Create counter
		     	var counter = document.createElement('div');
		     	counter.setAttribute('id', 'counter');
		     	counter.classList.add('counter');
		     	var counterText = document.createElement('p');
		     	counterText.setAttribute('id', 'counterText');
		     	
		     	badgeContainer.appendChild(counter);
		        counter.appendChild(counterText);
		        
		        
			}
	     	buildBadge();
	     	
	     	var count = ' ';
	        
	        function changeCounter() {
			    count++;
			    var newCounterText = count;
			    counterText.innerHTML = newCounterText;
			    
			    
			}//end changeCounter function
			
	     	changeCounter();
	     	
			function send(){
			    $.ajax({
					    url: "http://bc-net/Sandbox/juandev/_api/web/lists/GetByTitle('Qlinks')/items",
					    method: "GET",
					    headers: {
					        "Accept": "application/json; odata=verbose"
				    },
				    success: function(data) {
				    	var items = data.d.results;
				        console.log(items);
			           	     	
				     				           
			            //Send another request in 10 seconds.
			            setTimeout(function(){
			                send();
			            }, 10000);//End setTimeout
			        }
			    });//end ajax call
			}//end send function
			//Call our function
			send();
#2

What exactly are the results you’re expecting, and what are you getting instead? Are you getting any errors on your console? What do your server logs say when they receive the request?

#3

@chuckadams I am making an Ajax request to a sharepoint list I created. So I expect every time someone adds an item to that list the badges reflects the new items added. I am getting just the number 1 from the count++ (uploaded a screenshot)
Capture

#4

One problem I can see right away is this snippet:

	     	var count = ' ';
	        
	        function changeCounter() {
			    count++;

What does count++ do for a string? In fact, the whole way changeCounter is written and called doesn’t make sense. You’re calling it exactly once during your definitions, when you should be updating the counter somewhere inside the success: portion of your ajax call, probably to something like items.length – but without seeing any of your console output, I can’t tell

#5

I tried that but what happens is that it updates every time the call is being made in this case every 2 seconds Console screen attached

Capture
Capture1448×913 70.1 KB

#6

It looks to me like you’ve got the right results, so all you need to do is something like counterText.innerHTML = items.length in the success: portion of your ajax call.

As for the looping issue, your send() call is designed to be called every 10 seconds, since it ends with a setTimeout function designed to do exactly that. If you’re getting it every 2 seconds, chances are you’ve called it 5 times somehow and never cancelled the last timeout. You can save the return value of setTimeout and use cancelTimeout, but if you’re just calling the same function in a loop, just use the setInterval function once somewhere and forget about it.

#7

Yes you are right it is called every 10s. As to the items.length i tried it but of course it gave me the number of items the list has, and i need is just the new item or items added.

#8