Clearing cookies and sessions after logout

hey all,
i wanna make a confirmation alert box (jquery i suppose) then when triggers when someone click log out. on cancel it stays there but on ok it destory the session and cookies and logout. anyone help me out me wid that?

What do you want to focus on first, the confirmation box or the session cookies/logout part?

confirmation box

Like this? modal confirmation

yes. i wanna ask the user if he wanna log out or no. if yes than everything like session n cookies are unset/destriyed

Then download jQueryUI, load the css, jquery and jqueryui libraries, and use the following code:

Use this for your dialog:


<div id="dialog-confirm" title="Log out?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure that you want to log out?</p>
</div>


$(function() {
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            Logout: function () {
                $(this).dialog('close');
                window.location = 'logout.php';
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });
});

that was thoughtful but how do i make all cookies and session destory/end when he presses ok

The logout.php file is where that sort of work takes place. For that, I will perform a neat side-step, and move this thread over to the PHP forum.

i have that logout.php (i’ll point out that file to window.location. right?)which was done by another colleague. though i need to ask u, i see ur JS guru. why is JS hard to learn, i took part oin JS course by SP but so much that went above my head and i couldn’t grasp it

You might find similar issues with other programming languages too, as they’re just not easy to learn. You need to learn basic concepts that apply to apply to all languages such as variable management and control flow structure, and after that you have to also delve in to the specifics that make JavaScript special and unique as well.

With JavaScript though, we’re having to also develop the code to run in one of the most hostile development areas of all, that being on web browsers owned by many different companies and organisations.

JavaScript is a serious programming language, that just-so-happens to be used to perform simple scripting on web pages. The language is one step up from the pseudoclassical inheritance of classes and methods in so-called object-oriented languages such as PHP and C#. Instead, JavaScript goes the full distance where everything is an object, using prototypal inheritance instead, which allows you to extend any object as you require.

You may find it useful to go through the Crockford on Javascript video series. He’s one of the seminal founding fathers of good techniques that are used when writing code, and he provides a wide understanding of not just where the language came from, but for what it can be used for as well.

its not working. not giving any dialog

<a href="#" id="confirm">LOGOUT</a></div>
<script type="text/javascript">
$(function() {
    $( "#confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            Logout: function () {
                $(this).dialog('close');
                window.location = 'logout.php';
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });
});
</script>

Question: where to put this

<div id="dialog-confirm" title="Log out?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure that you want to log out?</p>
</div>

Is the id attribute supposed to be “confirm” (as in the jQuery) or “dialog-confirm” (as in the HTML)?

here is my code

<script type="text/javascript">
$(function() {
    $( "#confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        autoOpen:false,
        buttons: {
            Logout: function () {
                $(this).dialog('close');
                window.location = 'logout.php';
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });
});
</script>
</head>

<body>
<a href="#" onclick="confirm();">Logout</a>
<div id="confirm" title="Log out?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure that you want to log out?</p>
</div>

when i have autoOpen:false it work but that’s not what i need. i need it to open after i click the logout

You can have the click event for the logout, open up the dialog box by the following command:


$('#confirm').dialog('open);

sorry for being annoying but i don’t know much of where to put what u gave me above.can u help me that? sorry again for bothering

You could put it in a click event for the confirm element.

so i did line by line understanding how to make a dialog and made this


<script type="text/javascript">
$(function(){
    $(".confirm").dialog({
        height:200,
        resizable:false,
        title:'Alert',
        modal:true,
        autoOpen:false,
        buttons:{
            "Ok": function(){
            $(this).dialog("close"),
            window.location = 'logout.php'
            },
            "Cancel":function(){
                $(this).dialog('close');
            }
        }
    })
})
</script>

it work fine but i can’t fingur out two things

  1. how to call it on a <a href> tag that
  2. How to open it on call the <a> tag

i was able to cover the next step also as a part of “fustration”, here is my code

<script type="text/javascript">
$(function(){
    $(".confirm").dialog({
        height:200,
        width:400,
        resizable:false,
        title:'Alert',
        modal:true,
        autoOpen:false,
        buttons:{
            "Ok": function(){
            $(this).dialog("close"),
            window.location = '../logout.php'
            },
            "Cancel":function(){
                $(this).dialog('close');
            }
        }
    })
    $("#confirm").click(function(){
    $(".confirm").dialog("open")
    })
})
</script>

1.with this working, in some pages and in some pages its not as i have to include it from a include folder. (still working on the reason)
2. can i class the button property?