Hooking drupal s’ logout button with jquery

In a project I am working on, I had to hook the login and logout of drupal, so that an extra action would be taken. More specific to my case:  when logging in and/or out of a drupal, the same action should be taken for another session to a second server.

As drupal login and logout are buttons that are built in Drupal, It had to work around it.  The most common solution would be to add an extra class attribute to the links that performed the logout.  This class then could be triggered with Jquery to override the logout button to handle things differently.  You could think of it as branching the logout task Britain. In stead of going to a different page to perform logout, we call two pages with Jquery’s AJAX methods.  One to Drupal as it was intended and the other to the server (where for instance a single-sign-on session is running).

Let’s get started with a theme function adding the class.

  1. /**
  2.  * Function to fix logout links
  3.  * mytheme is the name of the custom theme
  4.  */
  5. function mytheme_menu_item_link($link) {
  6.   if (empty($link[‘localized_options’])) {
  7.     $link[‘localized_options’] = array();
  8.   }
  9.   if($link[‘link_path’] == ‘logout’) {
  10.     $link[‘localized_options’][‘attributes’][‘class’] = ‘logout’;
  11.   }
  12.   return l($link[‘title’], $link[‘href’], $link[‘localized_options’]);
  13. }

So if the link path is exactly the same as ‘logout’ - you could use ereg(i) too - , a logout class is added. This gives us a target to handle the element with javascript.

Add logout behaviour with Jquery magic

  1. /**
  2.  * Add logout behaviour
  3.  **/
  4. Drupal.behaviors.myLogout = function(context) {
  5.   context = context || document;
  6.   if(Drupal.jsEnabled) {
  7.     $("a.logout").each(function () {
  8.       return $(this).click(drupal_logout);
  9.     });
  10.   }
  11. }
  12.  
  13. /**
  14.  * Your custom loghou
  15.  **/
  16. function drupal_logout () {
  17.   $.post("/logout",
  18.     {target: ‘drupal’ },
  19.     function(data, textStatus) {      
  20.       // Notification: update div, just show you are logged out
  21.       // Data may be your own text (in stead of ajax response text)
  22.       $("#update_container").append(data);
  23.     },
  24.     "json"
  25.   );
  26.   $.post("http://www.google.com/logout",
  27.     {target: ‘google’ },
  28.     function(data, textStatus) {      
  29.       $("#update_container").append(data);
  30.     },
  31.     "json"
  32.   );
  33.   return false;
  34. }

This can be helpfull in other cases than the logout button. I even more sure you could handle the theme_function if clause much leaner that I did. I will work on this in next implementations. If i found a nicer and cleaner way to do this, I will post it here later on.

This entry was posted on Tuesday, September 30th, 2008 at 9:30 am and is filed under Drupal, javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “Hooking drupal s’ logout button with jquery”

  1. Hooking drupal s’ logout button with jquery Says:

    [...] Go to the author’s original blog: Hooking drupal s’ logout button with jquery [...]

  2. Sion Says:

    As a Drupal beginner can you tell me which files would I type the two code snippets?