In this post, i will show you how to implement a simple Ajax function in Drupal 7. The following example code is based on the blog post written by Kevin Hankens about implementing Ajax in Drupal 6.
Kevin Hankens’s blog – Drupal, jQuery and $.ajax() easyness

What i am going to do is the same as Kevin’s example. But for simplicity, i removed the access control logic so all content is visible to anonymous users.

So let’s create a custom module with folder name eureka_ajax.
eureka_ajax.info

name = Eureka Ajax
description = Simple Ajax example in Drupal 7 by ykyuen
core = 7.x
package = Eureka

 

eureka_ajax.module

<?php
/**
 * Implementation of hook_init().
 */
function eureka_ajax_init() {
  // Include the js file
  drupal_add_js(drupal_get_path('module', 'eureka_ajax') . '/eureka_ajax.js');
}

/**
 * Implementation of hook_menu().
 */
function eureka_ajax_menu() {
  $items = array();

  // Create a Drupal page to display our AJAX link.
  $items['eureka/page'] = array(
    'title' => 'Test Page',
    'page callback' => 'test_page_callback',
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM,
  );

  // Create a path to send our AJAX request to.
  $items['eureka/ajax'] = array(
    'title' => 'Ajax Request',
    'page callback' => 'ajax_request_callback',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

/**
 * Callback function for /eureka/page.
 */
function test_page_callback() {
  return theme('ajax_link');
}

/**
 * Implementation of hook_theme().
 */
function eureka_ajax_theme() {
  return array(
    'ajax_link' => array(),
  );
}

/**
 * Implementation of theme_ajax_link().
 */
function theme_ajax_link() {
  return l(t('What is the date and time?'), 'eureka/ajax', array(
    'attributes' => array(
      'id' => 'eureka-ajax')
    )
  );
}

/**
 * Callback function for /eureka/ajax.
 */
function ajax_request_callback() {
  if ($_POST['from_js']) {
    // Return the time if the from_js request para is set to true
    $response = array(
      'message' => t('It is approximately !date', array('!date' => date('M j Y h:i:s'))),
    );
    drupal_json_output($response);
    exit;
  } else {
    // Return an empty json array for incorrect request
    drupal_json_output(array());
    exit;
  }
}

 

eureka_ajax.js

(function ($) {
  Drupal.behaviors.eurekaAjax = {
    attach: function (context, settings) {
      // Bind an AJAX callback to our link
      var eurekaAjaxLink = $('#eureka-ajax');
      
      eurekaAjaxLink.click(function(event) {
        // Prevent the default link action
        event.preventDefault();
        
        // Get the request URL without the query string
        var ajaxUrl = eurekaAjaxLink.attr('href').split('?');
        
        $.ajax({
          type: "POST",
          url: ajaxUrl[0],
          data: {
            // For server checking
            'from_js': true
          },
          dataType: "json",
          success: function (data) {
            // Display the time from successful response
            if (data.message) {
              $(".messages").remove();
              $("#content").prepend('<div class="messages status">' + data.message + '</div>');
            }
          },
          error: function (xmlhttp) {
            // Error alert for failure
            alert('An error occured: ' + xmlhttp.status);
          }
        });
      });
    }
  };
})(jQuery);

 

Enable the module, clear the cache and then browse http://<drupal>/eureka/page.

 

Click the link and see what you get.

 

Done =)

Next: Drupal 7 – Simple Ajax implementation @ 2

Reference:

• Kevin Hankens’s blog – Drupal, jQuery and $.ajax() easyness
• Drupal Documentation – Managing JavaScript in Drupal 7

Update @ 2012-09-07: This example does not work in Garland theme. Please use the default Bartik theme for trial. Thanks Jack.