Ajax timed update issue - php

Question

Simply I have a menu bar with an animated notification badge made by CSS and implemented by SPAN class on the HTML. this badge should show the count of new messages and disappear if that count is 0. I need to check that every 1 second but with no luck.
my js:
<script type="text/javascript">
function removeAnimation(){
setTimeout(function() {
$('.bubble').removeClass('animating')
}, 200);
}
setInterval(function() {
$.ajax({
type: 'GET',
url: 'models/bubble.php',
data: 'html',
success: function(response){
document.getElementById("bub").innerHTML=response;
document.getElementById("bub").className = "bubble";
}
error: function(response) {
document.getElementById("bub").className = "hidden";
});
}
}, 1000);
</script>
my php (working and tested):
<?php
require_once("db.php");
$receiver = $this_user
$isnew = 1;
$stmt = $mysqli->stmt_init();
if ($stmt->prepare("SELECT * FROM messenger
WHERE receiver = ? AND isnew = ? ORDER BY timestamp")) {
$stmt->bind_param("si", $receiver,$isnew);
$stmt->execute();
$stmt->store_result();
$ttlrows = $stmt->num_rows;
$stmt->close();
}
echo $ttlrows;
?>
any help?

Answer 1

Below works for me. You need to call the function inside success again as setTimeout/setInterval will call the function only once after the delay you mentioned
setTimeout('pullNewMessageCount()', 100);
function pullNewMessageCount() {
var url = 'PHP Url';
$.ajax({
url: url,
dataType: 'html',
data:{
"whatever data you want to send, skip it if not require",
},
type: 'POST',
success: function(latestCount) {
setTimeout('pullNewMessageCount()', 100);// Important comment (this what you need to do)
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}