Casual Rumblings: jQuery + ajax + logout form

jQuery + ajax + logout form

Posted At : March 24, 2009 1:17 PM | Posted By : Admin
Related Categories: Web20, jQuery, Rants/Raves, Ajax, Javascript

I love jquery! Let me just say that now. I'm a true convert from prototype/scriptaculous. I love prototype for all it's pros. But, I can't deny the support from the jQuery community and the momentum it has in the web world.

With that said, I dove in and started playing around with the jQuery UI plugin (built by the jQuery guys of course). The dialog plug in is simply DOPE!! (is that a youngin' term?)

I was playing around with a logout confirmation dialog and here's what I've come up with. It's a bit verbose for my taste and by NO means the best way to do this. But, I do hope it points people in the right direction if they're looking to do something like this.

$('#logout').click(
        function(e){
        e.preventDefault();

$('<div id="confirmLogout" title="Logout?">Are you sure you want to log out?</div>').dialog(
            {
            modal: true,
            height: 100,
            width:350,
            show:"blind",
            hide: "blind",
            buttons:{
                "Yes":function() {
                    $.ajax({
                        url: 'someActionCall.cfm',
                        complete: function() {
                            $('#confirmLogout').html("See you next time!");
                            $('.ui-dialog-buttonpane').css('display','none');
                            var dlg = $("#confirmLogout").parents(".ui-dialog:first");
                            dlg.animate({ width: 200},50);
                            setTimeout(function(){$("#confirmLogout").dialog("close")},3000);
                            setTimeout(function(){location.reload();},1500);
                            }
                        });
                    },
                "No":function() {
                    $("#confirmLogout").dialog("close");
                    }
            },
            close:function(){
                 $("#confirmLogout").remove();
            }
            });

return false;
    });

The demo can be found here: Logout demo