Question

I’v built a application using codeigniter and I have a message system that displays the users messages, this is done with a foreach statement. I have some JS in the background that once a user clicks on ‘delete’ of a specific message that message hides from view while the JS posts the message ID to my controller and marks that message as deleted. What is happening though is that once a user clicks on delete only the first message hides (only the first foreach value) but all other messages have separate ids but are not responding to the delete click. I should also note that if I click on ‘delete’ of any message the first message hides and not the message I clicked on.

heres some code:

View

<?php foreach ($rows as $r) : ?>
<li id="notification_<?php echo $r['MID']; ?>"><?php echo anchor("$r[MID]", 'X', array('class'=>'delete', 'rel'=>"$r[MID]")); ?>
<p>
<?php echo anchor("headless/view_msg/$r[MID]", $r['head'], array('rel'=>'notifications')); ?>
<?php if(strlen($r['body'] >= 74)) : ?>
<?php echo $r['body']; ?>
 <?php else : ?>
<?php echo substr($r['body'], 0, 74) . "..."; ?>
<?php endif; ?>
</p>
</li>
<?php endforeach; ?>

JS:

    $("a.delete").click(function(eve) {
    eve.preventDefault();

    var MID = $("a.delete").attr('rel');

    $.post('headless/notification_read', {
        MID: MID},

    function(html){
        if(parseFloat(html)){

            $('#notification_' + MID).hide('slow')
            console.log('success');

        }else{

            console.log('fail');
        }
    })

});

Im not to sure whats going on here but my guess would be that the javascript is only linking the first foreach and not the rest(if so how would i fix this)

Any help would be appreciated.

Thanks.

Answer 1

$("a.delete").click(function(eve) {
    eve.preventDefault();

    var MID = this.rel; // `this` would be the element being clicked on....
    //var MID = $("a.delete").attr('rel'); this line is the problem....

    $.post('headless/notification_read', {
        MID: MID},

    function(html){
        if(parseFloat(html)){

            $('#notification_' + MID).hide('slow')
            console.log('success');

        }else{

            console.log('fail');
        }
    })
});

demo with comments