I have the following javascript which is supposed to pop a notification to the user if the php script bellow returns a mysql select count result higher than 0:
<script>
$(document).ready(function() {
function update() {
$.ajax({
type: 'POST',
url: '../ajax/alert/notification.php',
timeout: 1000,
success: function(data) {
$("#notification-alert-main").text(data);
$("#notification-alert-detailed").text(data);
if (data > 0) {
$("#notification-alert-message").innerHTML('<i class="fa fa-warning danger"></i> New alert has been detected');
}
window.setTimeout(update, 5000);
},
});
}
update();
});
</script>
The php script:
<?php
include('../../db.php');
$queryCountUnreadAlerts = $bdd->prepare("SELECT COUNT(*) Nb FROM exp_alert WHERE ale_read = 0;");
$queryCountUnreadAlerts->execute();
$dataCountUnreadAlerts = $queryCountUnreadAlerts->fetch();
$queryCountUnreadAlerts->closeCursor();
echo(intval($dataCountUnreadAlerts['Nb']));
?>
The web browser reports me an error:
[Error] TypeError: 'undefined' is not a function (evaluating '$("#notification-alert-message").innerHTML('<i class="fa fa-warning danger"></i> New alert has been detected')') success (index.php, line 230) l (jquery.min.js, line 4) fireWith (jquery.min.js, line 4) k (jquery.min.js, line 6) (anonymous function) (jquery.min.js, line 6)
I suspect a wrong variable type, but still I am working with integers all the time.
In JQuery, you use .html(), not .innerHTML
Use .html() instead of innerHTML
Or
change as follow
$("#notification-alert-message").get(0).innerHTML="<i class='fa fa-warning danger'></i> New alert has been detected";