Today I am in between a problem which is coming when I am trying to create a notifications system in PHP and AJAX.
So what I am doing is firstly fetching the notification rows from the database and then displaying it also with delete option. All the rows are having record no. with record attribute. So I want to send that id to a delete page when a user clicks on the delete icon.
Here is my code -
<?php
$email = $_SESSION[memberemail];
$unreadnotif = mysqli_query($conn, "SELECT * FROM notifications WHERE sendto='$email' AND status='unread' ORDER BY id DESC ");
$countunreadnotif = mysqli_num_rows($unreadnotif);
?>
<div class='list'>
<ul>
<li style='font-size:30px'><center><i class='fa fa-bell-o'></i> Latest Notifications <span data-balloon="Refresh" data-balloon-pos="left" class='float-right ref-notif'><i class='fa fa-refresh'></i></span></center></li>
<?php
if (mysqli_num_rows($unreadnotif) == 0) {
?>
<center><i class='fa fa-eye-slash' style='font-size:40px'></i><br><span style='font-size:15px;font-family:roboto'>No notifications to show</span></center>
<?php
}
else {
while($row = mysqli_fetch_array($unreadnotif)) {
?><li record="<?php echo $row["id"]; ?>"><?php echo $row["message"];?> <span id='delete-notif' class='float-right' data-balloon="Delete forever" data-balloon-pos="left"><i class='fa fa-trash'></i></span> <span class='float-right' data-balloon="<?php echo $row["createdon"]; ?>" data-balloon-pos="left"><i class='fa fa-clock-o'></i></span></li><?php
}
}
?>
</ul>
</div>
</div>
<!--Ends-->
<script type="text/javascript">
$(document).ready(function(){
$(".ref-notif").click(function(){
$(".notif-box").load("getnotifcount.php");
});
$("#delete-notif").click(function(){
var notifid = $(this).parent().attr("record");
$.post("deletenotif.php",{deleteid:notifid},function(data){
$("#result3").html(data);
});
$(this).parent().fadeOut()
});
});
</script>
<div id='result3'></div>
The Problem - When I am clicking on the first notification delete icon then only it is deleting the record, i.e if we click on 2nd or upper notification then the click handler is not working!
Please help.
Thanks In Advance :)