Question

I’m building a site for someone and on the Admin side there is a “Manage Users” page to manage the website’s users. Here is my two functions to suspend and unsuspend (and for the alert):

var admin = {
    alert: (function(msg,dur) {
        if(!dur || dur == null) {
            dur = 1500;
        }
        $('#alert_box2').remove();
        $('body').append('<div id="alert_box2" style="width: 100%; height: 9px; top: -17px; left: 0; position: absolute; text-align: center; z-index: 5;"><div id="alert_box_inner2"></div></div>');
        $('#alert_box2').show(0, function() {
            if(dur!=='none') {
                $('#alert_box_inner2').html(msg).stop(true, true).fadeIn(800).delay(dur).fadeOut(800, function() {
                    $('#alert_box2').remove();
                });
            }
            else {
                $('#alert_box_inner').html(msg).show();
            }
        });
    }),
    suspendUser: (function(id) {
        admin.alert('Please wait...',20000);
        $.get('user_more_actions.php?action=suspend&nolightbox=1&id='+id, function(data,textStatus) {
            setTimeout(function() {
                if(textStatus=='success') {
                    if(data.indexOf('suspended') > -1) {
                        name = data.replace('suspended ','');
                        admin.alert(name+' is now suspended.',2500);
                        $('#status_'+id).html('<strong style="color: red;">Suspended</strong>');
                        $('#suspend_'+id).attr('id','unsuspend_'+id).text('Unsuspend').removeClass('suspend').addClass('unsuspend');
                    }
                    else {
                        admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#suspend_'+id+'\').click();">Try again</a>','none');
                    }
                }
                else {
                    admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#suspend_'+id+'\').click();">Try again</a>','none');
                }
            }, 500);
        });
    }),
    unsuspendUser: (function(id) {
        admin.alert('Please wait...',20000);
        $.get('user_more_actions.php?action=unsuspend&nolightbox=1&id='+id, function(data,textStatus) {
            setTimeout(function() {
                if(textStatus=='success') {
                    if(data.indexOf('unsuspended') > -1) {
                        name = data.replace('unsuspended ','');
                        admin.alert(name+' is no longer suspended.',2500);
                        $('#status_'+id).html('<strong style="color: green;">Active</strong>');
                        $('#unsuspend_'+id).attr('id','suspend_'+id).text('Suspend').removeClass('unsuspend').addClass('suspend');
                    }
                    else {
                        admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#unsuspend_'+id+'\').click();">Try again</a>',20000);
                    }
                }
                else {
                    admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#unsuspend_'+id+'\').click();">Try again</a>',20000);
                }
            }, 500);
        });
    })
};

And the code that triggers the functions when a Suspend or Unsuspend link is clicked:

$('.suspend').each(function() {
    $(this).live('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('id').replace('suspend_', '');
        admin.suspendUser(id);
    });
});
$('.unsuspend').each(function() {
    $(this).live('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('id').replace('unsuspend_', '');
        admin.unsuspendUser(id);
    });
});

Everything is working ok, except when I click again it messes up. When a Suspend link is clicked, it changes to Unsuspend (and changes the ID). But then if I click Unsuspend it doesn’t work, and it is calling the admin.suspend() function instead of admin.unsuspend() (and the ID isn’t being passed so the name isn’t displayed):

When the class and the ID is changed it should call either the admin.suspend(id_here) or admin.unsuspend(id_here); but it isn’t.

Does anyone know why this is happening? Thanks in advance and I’m sorry that this post is long.

Answer 1

I’ve fiddled with it. Hope this helps:http://jsfiddle.net/wKGKu/

Update: After reading your concerns for .each, I’ve updated the code to demonstrate it isn’t needed: http://jsfiddle.net/wKGKu/2/