Linuxers

Drupal 7: How to remove throbber image from ajax links and create a custom throbber.

chia — Tue, 18 Oct 2011 10:59:24 +0000

In this howto, we will see how to remove the blue throbber image and related markup when you click on an ajax link and replace with a custom throbber image.

Any form element or link can be made ajax by setting #ajax property. But #ajax property is tied closely to drupal form elements. There is another way in drupal to convert a link to use ajax, by setting 'use-ajax' class. But for those links the progress type is always throbber.

In this howto we will look at one of the many ways to change to our custom throbber.
Instead of use-ajax we will use custom-ajax class. We will bind ajax behaviour to elements having this class. So instead of <a class="use-ajax">link</a> we will do <a class="custom-ajax">link</a>

<?php
  Drupal.behaviors.MyAjax = {
    attach: function(context, settings) {
      // Bind Ajax behaviors to all items having the class 'custom-ajax'.
      $('.custom-ajax', context).once('ajax', function () {
        var element = this;
        var element_settings = {};
        element_settings.progress = { 'type': 'customLoader' };

        if ($(this).attr('href')) {
          element_settings.url = $(this).attr('href');
          // Do ajax on a custom event
          element_settings.event = 'MyClickEvent';
        }
        var base = $(element).attr('id');
        var ajax = new Drupal.ajax(base, element, element_settings);
        ajax.default_success = ajax.success;
        
        // Change the success callback to remove/hide our custom throbber
        ajax.success = function (response, status) {
          // hide/remove custom loader
          // Additionally we can remove our custom throbber markup here
          $(element).parents('.my-throbber:eq(0)').hide();
          // do normal processing
          ajax.default_success(response, status);
        };
        
        // Similarly you may want to update error callback to remove your custom throbber in case of error
        // By default it throws an alert , lets change it to something pretty
        ajax.error = function(response, uri) {
          // Hiding throbber
          $(element).parents('.my-throbber:eq(0)').hide();
          // display error in nice jquery_ui dialog
          $('<div id="newDialogBox">' + Drupal.ajaxError(response, uri) + '</div>').dialog();
          
           // Part of code below is copied from Drupal.ajax.prototype.error 
            // Undo hide.
            $(this.wrapper).show();
            // Re-enable the element.
            $(this.element).removeClass('progress-disabled').removeAttr('disabled');
            // Reattach behaviors, if they were detached in beforeSerialize().
            if (this.form) {
              var settings = response.settings || this.settings || Drupal.settings;
              Drupal.attachBehaviors(this.form, settings);
            }
        };

       // Add our new element to global variable, so other module can get a chance to update it
        Drupal.ajax[base] = ajax;
        
        // On a click event we will trigger our custom MyClickEvent which will do the ajax
        // The whole idea is to make custom events, suppose you want to load content dynamically on mouseover like a tooltip, you can register a mouseover/hover event 
        $(element).click(function() {
          // show custom throbber
          // We can add our custom throbber markup here. In this case i already had a throbber markup in my html and was hidden by default 
          $(element).parents('.my-throbber:eq(0)').show();
          // Trigger the ajax event
          $(element).trigger('MyClickEvent');
          return false;
        });        
      });
    }  
  };
?>

In your php code add

<?php
  drupal_add_library('system', 'ui.dialog'); 
?>

Drupal 7: Convert user login block to use ajax

chia — Sun, 04 Sep 2011 08:37:01 +0000

In this simple how to we will see how we can easily convert drupal 7 user login block to use ajax. This is one of the many methods of using ajax for login block. We will see few cool d7 tricks that makes this very easy.

username: test
password: test

UPDATE: I am now maintaining ajaxlogin/register module to use it in your own project download and enable the module and add the AjaxLogin block to your site.

Lets get started by defining hook_menu(). We have defined a menu similar to user/password. But this new menu entry will degrade gracefully and we defined 2 other menu items to listen to ajax calls.

<?php
/**
 * Implementation of hook_menu()
 */
function ajaxlogin_menu() {
  $items = array();
  
  // Fetch custom user password form via ajax and will have graceful degradation
  $items['ajaxlogin/password'] = array(
    'title' => 'Request new password',
    'page callback' => 'ajaxlogin_password_form',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
    'file' => 'ajaxlogin.pages.inc',
  );  
  
  // Process login via ajax 
  $items['ajaxlogin/user_login'] = array(
    'title' => 'Ajax user login',
    'page callback' => 'ajaxlogin_login_ajax_callback',
    'access callback' => 'user_is_anonymous',
    'type' => MENU_CALLBACK,
    'file' => 'ajaxlogin.pages.inc',
    'delivery callback' => 'ajaxlogin_ajax_deliver_callback',
  );  
  
  // Process user password form via ajax
  $items['ajaxlogin/request_password'] = array(
    'title' => 'Request password Ajax',
    'page callback' => 'ajaxlogin_request_password_ajax_callback',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
    'file' => 'ajaxlogin.pages.inc',
    'delivery callback' => 'ajaxlogin_ajax_deliver_callback',
  );  
  
  return $items;
}
?>

This is not required but if you want to replace all links to user/password to your new custom menu entry use this hook. In my case i used hook_menu_alter() and removed the user/password menu item, so i needed this hook to fix broken paths.

<?php
/**
 * Implementation of hook_url_outbound_alter
 */
function ajaxlogin_url_outbound_alter(&$path, &$options, $original_path) {
  if ($path == 'user/password') {
    $path = 'ajaxlogin/password/nojs';
  }
}
?>

We are defining a custom delivery callback, since we don't want to add any additional js/css along with ajax response. If you care about the page state, use 'ajax_deliver' as 'delivery callback'.

<?php
/**
 * Custom delvery callback
 */
function ajaxlogin_ajax_deliver_callback($page_callback_result) {
  print $page_callback_result;
  ajax_footer();
}
?>

We are defining custom block implementation. Its sometimes better to add it to page template directly. In that case i suggest you to use hook_page_alter or hook_page_build to add the variables to page template directly.

<?php
/**
 * Implementation of hook_block_info()
 */
function ajaxlogin_block_info() {
  $blocks['ajaxlogin'] = array(
    'info' => 'Ajaxlogin Block',
  );
  return $blocks;
}

function ajaxlogin_block_view($delta = 0) {
  $block = array();
  global $user;
  if (!$user->uid && !(arg(0) == 'user' && !is_numeric(arg(1)))) {
    $block['subject'] = ('User login');
    $block['content'] = drupal_get_form('ajaxlogin_login_block_form');
  }
  return $block;
}
?>

This is similar to user login block we are creating a custom user login form. Yes, we can use user_login_block form and use hook_form_alter. But for the sake of simplicity i have created a similar form.

<?php
/**
 * Custom login form
 */
function ajaxlogin_login_block_form($form, &$form_state) {
  $form['errors'] = array('#markup' => '<div id="ajaxlogin-error"></div>');

  $form['#attached'] = array(
    'js' => array(drupal_get_path('module', 'ajaxlogin') . '/js/ajaxlogin.js'),
  );

  $form['#action'] = url($_GET['q'], array('query' => drupal_get_destination()));

  $form['#id'] = 'ajaxlogin-login-form';

  $form['#validate'] = user_login_default_validators();

  $form['#submit'][] = 'user_login_submit';

  $form['name'] = array('#type' => 'textfield',
    '#title' => t('Username'),
    '#maxlength' => USERNAME_MAX_LENGTH,
    '#size' => 15,
    '#required' => TRUE,
  );

  $form['pass'] = array('#type' => 'password',
    '#title' => t('Password'),
    '#maxlength' => 60,
    '#size' => 15,
    '#required' => TRUE,
  );

  $form['actions'] = array('#type' => 'actions');

  $form['actions']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Log in'),
    '#ajax' => array(
      'path' => 'ajaxlogin/user_login',
    ),
  );

  $form['request_password'] = array(
    '#type' => 'link',
    '#title' => t('Request new password'),
    '#href' => 'ajaxlogin/password/nojs/',
    '#id' => 'ajax_link',
    '#attributes' => array(
      'class' => array('use-ajax'),
    ),
  );

  return $form;
}
?>

We will create another file ajaxlogin.pages.inc here and add the code below to that file.

<?php
/**
 * Load Request password using ajax 
 */
function ajaxlogin_password_form($type = 'ajax') {

  $form = drupal_get_form('ajaxlogin_user_pass');
  $output = render($form);

  if ($type == 'ajax') {
    $commands = array();
    // Replace the login form with request for password form
    $commands[] = ajax_command_replace('#ajaxlogin-login-form', $output);
    $page = array('#type' => 'ajax', '#commands' => $commands);
    $commands = ajax_prepare_response($page);
    print ajax_render($commands);
  }
  else {
    return $output;
  }
}

/**
 * Request user password form
 */
function ajaxlogin_user_pass($form, &$form_state) {
  module_load_include('pages.inc', 'user');
  global $user;

  $form['#id'] = 'ajaxlogin-user-pass';

  $form['#attributes']['class'] = array('ajaxlogin-user-form');

  $form['errors'] = array('#markup' => '<div id="ajaxlogin-error"></div>');

  $form['name'] = array(
    '#type' => 'textfield',
    '#title' => t('Username or e-mail address'),
    '#size' => 60,
    '#maxlength' => max(USERNAME_MAX_LENGTH, EMAIL_MAX_LENGTH),
    '#required' => TRUE,
  );

  // Allow logged in users to request this also.
  if ($user->uid > 0) {
    $form['name']['#type'] = 'value';
    $form['name']['#value'] = $user->mail;
    $form['mail'] = array(
      '#prefix' => '<p>',
      '#markup' =>  t('Password reset instructions will be mailed to %email. You must log out to use the password reset link in the e-mail.', array('%email' => $user->mail)),
      '#suffix' => '</p>',
    );
  }

  $form['#validate'][] = 'user_pass_validate';
  $form['#submit'][] = 'user_pass_submit';

  $form['actions'] = array('#type' => 'actions');
  $form['actions']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('E-mail new password'),
    '#ajax' => array(
      'path' => 'ajaxlogin/request_password',
    ),
  );

  return $form;
}

/**
 * Process user login form using ajax
 */
function ajaxlogin_login_ajax_callback() {
  // Get the form details
  list($form, $form_state) = ajax_get_form();
  drupal_process_form($form['#form_id'], $form, $form_state);
  $commands = array();
  if (!form_get_errors()) {
    // No form error, Lets print a login successful message
    // And do a page reload
    $commands[] = ajax_command_html('#ajaxlogin-error', t('Login successful. You are now being redirected.'));
    $settings_data = array('ajaxlogin_reload' => TRUE);
    array_unshift($commands, ajax_command_settings($settings_data, FALSE));
  }
  else {
    // throw out errors
    $commands[] = ajax_command_html('#ajaxlogin-error', theme('status_messages'));
  }
  return drupal_json_encode($commands);
}

/**
 * Request password ajax call
 */
function ajaxlogin_request_password_ajax_callback() {
  module_load_include('pages.inc', 'user');

  list($form, $form_state) = ajax_get_form();
  drupal_process_form($form['#form_id'], $form, $form_state);
  $commands = array();
  if (!form_get_errors()) {
    // Status containing message "Further instructions have been send to your..."
    $commands[] = ajax_command_html('#ajaxlogin-user-pass', theme('status_messages'));
  }
  else {
    $commands[] = ajax_command_html('#ajaxlogin-error', theme('status_messages'));
  }
  return drupal_json_encode($commands);
}
?>

Finally little js trick if the login is successful we reloading the page again to load the authenticated user UI.
Create a file /js/ajaxlogin.js and add the code below.

<?php
(function($) {
  
  Drupal.behaviors.ajaxlogin = { 
    attach: function(context, settings) {
      // Redirect if ajaxlogin_reload property is set
      if (settings.ajaxlogin_reload) {
        window.location.reload();
      }   
    },  
  };  
  
}) (jQuery);
?>

I have attached the module code below.

Attachment	Size
ajaxlogin.tgz	2.35 KB

Use free with '-s' option to get a continuous update of memory usage info

shredder12 — Wed, 13 Apr 2011 19:27:31 +0000

Free command gives a concise information of the memory usage of the system. The program displays the info once and exits. You can use the ‘-s’ option to update the output continuously. Unlike top command, free doesn’t use ncurses, hence instead of a page refresh emulation its simply continuous printing. But it sure does the job.

Along with the ‘-s’ option you need to specify the result delay duration in seconds; decimal works too.

[shredder12]$ free -s 3

             total       used       free     shared    buffers     cached
Mem:   2516       1322       1194          0         69        506
-/+ buffers/cache: 746       1770
Swap: 1906          0         1906

             total       used       free     shared    buffers     cached
Mem:   2516       1332       1184          0         69        506
-/+ buffers/cache: 751       1765
Swap: 1906          0          1906

             total       used       free     shared    buffers     cached
Mem:   2516       1320       1196          0         69        506
-/+ buffers/cache: 744       1772
Swap: 1906          0          1906

About:me Firefox addon - View a visual pattern of your Internet activities

shredder12 — Tue, 12 Apr 2011 19:31:59 +0000

So, after the about:memory url, I started looking for more about: URI scheme options in Firefox and came across an addon which adds an “about:me” URL. This addon, "about:me", makes use of the browsing and downloading history data to give our browser usage pattern a visual representation through graphs and pie charts. Its actually pretty good. You can see a list of most visited websites, your hourly browsing pattern, kind of files you have downloaded and daily download pattern too.

It doesn’t end here. If you click on any of the graph, you’ll see a list of the items associated with the stats.

As you can see there are a few issues here.

For some reason, its showing the download stats of 26th March
I don't have an option to configure the stats.
I'd prefer an option to choose between hourly, daily, weekly or monthly patterns.

Since, its an experimental prototype of an upcoming firefox feature(Yep! this is what it says under the developer comments :D), I shouldn't expect much. But this comment seems to be a few months old. I wonder why it wasn't included in Firefox 4 but it indeed deservers to be an integral feature.

Install about:me addon, open "about:me" and check it out.

How to: Get the information of your Computer's Hardware components using Dmidecode command

shredder12 — Tue, 12 Apr 2011 12:57:16 +0000

Dmideocde is a wonderful utility to get detailed information about your system’s hardware components. It extracts the information from the computer’s Desktop Management Interface(DMI) and displays in a human readable format. Please note that, it doesn’t probe the devices in order to gather the information, it just reads it from some data structures.

If you run dmidecode without any option, it will display everything. Using a few of its options you can easily filter out the output. Lets take a simple example.

Suppose you want to retrieve information about the L1 & L2 caches present in your system. Using the --type or -t option, you can specify the type.

[root]# dmidecode -t cache
# dmidecode 2.9
SMBIOS 2.4 present.

Handle 0x0006, DMI type 7, 19 bytes
Cache Information
    Socket Designation:
    Configuration: Enabled, Socketed, Level 1
    Operational Mode: Write Back
    Location: Internal
    Installed Size: 32 KB
    Maximum Size: 32 KB
    Supported SRAM Types: Unknown
    Installed SRAM Type: Unknown
    Speed: Unknown
    Error Correction Type: Unknown
    System Type: Unknown
    Associativity: Unknown

Handle 0x0007, DMI type 7, 19 bytes
Cache Information
    Socket Designation:
    Configuration: Enabled, Socketed, Level 2
    Operational Mode: Write Back
    Location: Internal
    Installed Size: 2048 KB
    Maximum Size: 4096 KB
    Supported SRAM Types: Unknown
    Installed SRAM Type: Burst
    Speed: Unknown
    Error Correction Type: Unknown
    System Type: Unknown
    Associativity: Unknown

Other members of the type list are: bios, system, baseboard, chassis, processor, memory, cache, connector, slot.

Similary, if you want to find the value of a specifc DMI string, then mention the keyword with the --string or -s option. Say, you want to find the name of the processor manufacturer. Use the following command.

[root]# dmidecode -s processor-manufacturer
Intel

You can find other keywords in the manpage of dmidecode.

How to precisely find the amount of memory or RAM being used by Firefox

shredder12 — Sun, 10 Apr 2011 14:56:59 +0000

Until today, I relied on system monitor & top to find out the amount of memory being used by firefox. This works fine but there is an even better way to find out the exact amount used by the browser. Visit about:memory page to find it out. It lists out detailed information about the memory used and its distribution.

The history of the origin of grep command

shredder12 — Tue, 05 Apr 2011 17:14:37 +0000

Grep is one of the most important tools for a shell user. When it comes to retrieving required data from a bulk of text, grep is your best bet. Its very flexible, powerful and as I came to know today, has an interesting story too.

It all started a long time ago. With the increasing popularity of regular expressions, the text editor “ed” included a functionality using which one can print the lines, in the currently edited file, which matches a regular expression.

The command syntax is like this:

g/reg-ex/p

which means “global regular expression print”.

This feature proved to be so much useful that it was turned into a standalone tool which we now know as grep. It is now a default tool in almost all Unix & Unix-like systems.

In addition to grep, you may also find egrep. In order to extend the regular expression capabilities of grep, extended grep aka egrep was introduced. Although its just a wrapper to the “grep -E” command.

This information might not be very useful when you use grep the next time, but its always fun to know the story behind your favourites

How to remove or uninstall Nouveau drivers from Ubuntu

shredder12 — Tue, 05 Apr 2011 07:14:34 +0000

So, I blew my Graphic card today and while troubleshooting the issue I tried to install proprietary Nvidia drivers. But in order to do that you are required to remove nouveau drivers from the system. This guide will tell you how to disable and remove nouveau drivers step by step.

Before starting, you might want to know that nouveau is a project which aims to develop open source drivers for Nvidia cards. When you install Ubuntu, it detects your card and installs these drivers.

Please note that, nouveau drivers manual removal is required only if you are going to install the propreitary nvidia drivers yourself. If this is not the case then directly install the required graphic drivers from System->Administration->Hardware drivers. Its the recommended and the most convenient way available.

For our little endeavour, here is what we are going to do.

We'll blacklist all the culprit modules,
remove all the nvidia* packages and
as an extra step we may have to update the initramfs disk because it could be configured to load the modules at startup.

1) Blacklist the modules. Open the blacklist.conf file.

[shredder12]$ sudo vim /etc/modprobe.d/blacklist.conf

add the following modules in the file.

blacklist amd76x_edac #this might not be required for x86 32 bit users.
blacklist vga16fb
blacklist nouveau
blacklist rivafb
blacklist nvidiafb
blacklist rivatv

Save the file and exit.

2) Remove all the nvidia* packages

[shredder12]$ sudo apt-get remove --purge nvidia*

3) Once you are done with the steps above, reboot, stop the display manager and try to install nvidia drivers.

Press Ctrl-Alt-F1. Once you are in the text mode, stop the display manager. This will end all the applications, so you better close them yourself before completing this step.

To stop the display manager use the following command

[shredder12]$ sudo /etc/init.d/gdm stop

gdm is for gnome display manager. If you are using kde then use “kdm”.

Now, run the driver package that you downloaded from Nvidia’s website.

[shredder12]$ sudo ./NVIDIA-Linux-x86-260.19.44.run

4) If you still get the error related to nouveau drivers then you are probably required to update the initramfs disk. Probably it might be configured to load the nouveau drivers. Don't reboot or poweroff, run this command to update the initramfs disk.

[shredder12]$ sudo update-initramfs -u

Now reboot and repeat the step 3. This time things should go smoothly.

Similar Links

SuperTuxKart 0.7.1 hits Release Candiadate

shredder12 — Mon, 04 Apr 2011 20:13:29 +0000

The release candidate of the upcoming release of SuperTuxkart, version 0.7.1, is available for download. The RC brings some significant changes from the version 0.7, released last december. The additions include - particle and weather affects, a smoother multi player setup, new shiny suburbs track, many tracks have been renamed and a lot more small changes and bug fixes.

For more information, take a look at the announcement blog.

Installation

Ubuntu users can easily install it using the stk/dev PPA. The RC is available there. Run the following commands to add the PPA and update supertuxkart.

[shredder12]$ sudo add-apt-repository ppa:stk/dev

[shredder12]$ sudo apt-get update && sudo apt-get install supertuxkart

What if no ubuntu?

Other linuxers can directly run the game from the binary available on the project’s homepage. Just download the one for your architecture, extract the package and run “run_game.sh”.

[shredder12]$ tar -xvjf supertuxkart-0.7.1-rc1-linux-glibc2.12-i686.tar.bz2

Correct your habit of incorrectly typing "ls" using the program "sl"

shredder12 — Mon, 04 Apr 2011 17:55:44 +0000

Almost everyone of us would have made the mistake of incorrectly typing “sl” or “LS” instead of a simple “ls”. Seriously! how difficult could it be to type those two letters? But we keep making the same mistake over and over. In order to correct this problem, there is a wonderful program name “sl”. It shows a small animation of a steam locomotive(abbr. sl) every time we type “sl” or “LS”. It may sound funny as of now, but trust me, its really annoying when you are doing some serious work and suddenly a locomotive comes out of nowhere, running across the terminal.

The annoying part is that it doesn't respond to Ctrl-C and there is nothing one can do in such a short time other than viewing it get past. Now that I'm thinking, it'd be fun to pull a prank on someone who isn't aware of sl.

Here is how you install the package.

[shredder12]$ sudo apt-get install sl

Well, its annoying nature does makes it work. Sooner or later you stop making the mistakes. Here are two different versions of the locomotive.

[shredder12]$ sl -a

[shredder12]$ sl -l