Question

My websystem im coding with now is integrated from the originally phpBB system. With this i mean when you log on my websystem, you have actually logged into the forum from the login page. Now i came to the “log out” part, and i want to make it smart. Right now its a simply link with logout:

<a href="<?php echo BASEDIR; ?>../../ucp.php?mode=logout&sid=<? echo $user->data['session_id']; ?>" style="margin-left: 14px; font-size: 10px;">- Log Out</a>

As you see in the link it refers to the forum´s ucp.php?mode=logout, and you need to have the SID variable in it in order to log out right.. anyway..

I want to do this log out part in a smart way, i mean, not so you land on the forum´s “you have now been logged out”, i want something maybe like run this page in background when you click, and then it refreshes the current page your on.

Or should it be smarter just try to modify the phpbb file ucp.php? I think its hard coded, and not the way I am coding, so thats why i find it abit tricky.

Thank you for your answers and examples on how this could be done, in a smart way..

Answer 1

It looks like the logout is just a GET request so you could use the jQuery AJAX libraries to do this for you.

Look at the jQuery.get() documentation here
http://api.jquery.com/jQuery.get/

The basic flow that you’re looking for is

1. When the user clicks on the link, intercept the click with jquery.
2. Make an AJAX GET request to the logout page, passing the necessary data.
3. Return false to prevent the user’s browser from navigating to the link (this way it’ll still work if they have JS off).
4. When the AJAX Request finishes, update the page to say that the user has logged out.

$.get('../../ucp.php', {mode:"logout", sid:sid-goes-here}, function(){
  //do something here after the logout, perhaps updating the page to say "Logged out"
});

This is going to send a request to the logout page in the background passing in the variables required to initiate a logout. Once this request is sent the function defined in the last parameter is going to be called. Perhaps something like:

$("#header").append("<div class = 'logout-success'>You have been logged out!</div>");

would work for you, but you’re free to do whatever you want in there.

Edit to summarize my out-of-order thoughts here’s a possible example.

$(function(){

    $(".logout-link").click(function(){
        $.get('../../ucp.php', {mode:"logout", sid:sid-goes-here}, function(){
             $("#header").append("<div class = 'logout-success'>You have been logged out!</div>");
        });
        return false;
    });

});