Question

I have this html:

<div id="signbtn">
<a id="login-link" class="btnsignin" title="Login">Sign in</a>
</div>

Upon successful log in, I am able to change the anchor class to “btnsignout” and the title to “Sign out”. So far so good. And now when I click on the anchor to sign out, the log out page loads into content div, but the anchor title doesn’t change back to “Sign in”. Clicking on it doesn’t do anything. The anchor is dead.

Can someone take a look and let me know what change I need to make to the jquery function. Thanks for all the help!

Here is my jquery code:

$('#signbtn').click(function() { 
    $.each($(this).children('a'), function(){
    if($(this).hasClass('btnsignout')){                     
        $('#signbtn a').attr('name', 'Sign In');
        $(this).removeClass('btnsignout');
        $(this).addClass('btnsignin');
        $("#content").load("../admin/logout.php");      
    }

    })
    return false;
});

Answer 1

Here’s an example of how I would do this.

Using “live” makes it easier I think, and this way you can have more than one button in your doc and it would work (some changes would be needed to change all buttons from login to logout, and not only the clicked button).

Declaring the events functions separately also makes it easier to understand (I think).

function onSignOutClicked() {
    // Convert the clicked button into a sign-in button
    $(this)
        .attr('class', 'btnsignin')
        .attr('title', 'Login')
        .text('Sign in');

    // Exec ajax call to sign out and put result in #content
    $('#content').load('../admin/logout.php');
}

function onSignInClicked() {
    // Convert the clicked button into a sign-out button
    $(this)
        .attr('class', 'btnsignout')
        .attr('title', 'Logout')
        .text('Sign out');

    // Exec ajax call to sign out and put result in #content
    $('#content').load('../admin/login.php');
}

$('.btnsignout').live(click, onSignOutClicked);
$('.btnsignin').live(click, onSignInClicked);

Maybe you could make a jQuery plugin of this. This way it would be really easier to apply it on an HTML doc, and you could regroup all functions about signing in and out in this plugin.

Here’s an example plugin (I didn’t exec this code, there’s probably bugs) :

// Self executing function, to work in a protected scope
(function(window, $) {

    function LoginManager(contentNode, options) {

        // register instance properties
        this.contentNode = contentNode;
        this.options = options;


        // Convert instance methods to be able to bind them to events
        var _this = this,
            so = this.onSignOutClicked,
            si = this.onSignInClicked;

        this.onSignOutClicked = function () {
            return so.apply(_this, arguments);
        };

        this.onSignInClicked = function () {
            return si.apply(_this, arguments);
        };

        // Attach click events to elements in the HTML doc
        $('.' + this.options.loginBtnCls).live('click', this.onSignInClicked);
        $('.' + this.options.logoutBtnCls).live('click', this.onSignOutClicked);
    }

    // Define methods for the LoginManager class
    LoginManager.prototype = {

        onSignOutClicked : function onSignOutClicked() {
            // Convert the clicked button into a sign-in button
            $('.' + this.options.logoutBtnCls)
                .attr('class', this.options.loginBtnCls)
                .attr('title', 'Login')
                .text('Sign in');

            // Exec ajax call to sign out and put result in #content
            $(this.contentNode).load('../admin/logout.php');
        },

        onSignInClicked : function onSignInClicked() {
            // Convert the clicked button into a sign-out button
            $('.' + this.options.loginBtnCls)
                .attr('class', this.options.logoutBtnCls)
                .attr('title', 'Logout')
                .text('Sign out');

            // Exec ajax call to sign out and put result in #content
            $(this.contentNode).load('../admin/login.php');
        }

    };

    // We define the loginManager plugin, if it doesn't already exist
    $.fn.loginManager = $.fn.loginManager || function(options) {
        options = $.extend({}, $.fn.loginManager.options, options);

        return this.each(function() {
            new LoginManager(this, options);
        });
    };

    // default options for the plugin
    $.fn.loginManager.options = {
        loginBtnCls : 'btnsignout',
        logoutBtnCls : 'btnsignin'
    };

}(this, this.jQuery));

Sorry I had some time to kill 🙂

Nico