0

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 :)

3 Answers3

0

When you use

$("#delete-notif").click(function(){ ..

It only does for the first instance. For all of them use something like this:

$("[id=delete-notif]").forEach(function(ele) {
    ele.click(function() {
        var notifid = $(this).parent().attr("record");

        $.post("deletenotif.php",{deleteid:notifid},function(data){
             $("#result3").html(data);
        });

        $(this).parent().fadeOut()
    }
});

Ref - How to select all elements with a particular ID in jQuery?

Community
  • 1
  • 1
kawadhiya21
  • 2,458
  • 21
  • 34
0

Gotcha! After some searching, I came to know that using id will not benefit so I used the class selector and it worked!

0

It seems like you have multiple element IDs on the same page

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
}

All the records have the same ID, but element IDs should be unique within the DOM (page). This means that click event will be bound to only the first element with that ID.

The workaround I normally use around this is that you append a unique identifier to the ID, effectively creating unique IDs to each delete button. You then bind the click event handler using a selector that would match all the deletable items, and refer to them with $(this)

This could be the adding of items:

while($row = mysqli_fetch_array($unreadnotif)) { ?>
<li record="<?php echo $row["id"]; ?>"><?php echo $row["message"];?> <span id='delete-notif-<?php echo $row["id"]; ?>' 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
}

Then the event binding, choose a more appropriate selector

<script type="text/javascript">
$(document).ready(function(){ 
  $(".ref-notif").click(function(){ 
  $(".notif-box").load("getnotifcount.php");
  });

$("li").click(function(){
  var notifid = $(this).parent().attr("record");

  $.post("deletenotif.php",{deleteid:notifid},function(data){
  $("#result3").html(data);
  });

  $(this).parent().fadeOut()

  });

});
</script>
ISO MCodD
  • 49
  • 1
  • 5