Drupal 7: AJAX-Request Modul

Autor: Sven am Fri, 08.08.2014 - 16:44

In diesem Tutorial möchte ich auf die Möglichkeiten mit Drupal und AJAX eingehen. Ziel ist es über einen Klick auf einen Link entsprechende Daten nachzuladen und danach anzuzeigen. Als erstes benötigen wir dafür die klassische Modulstruktur:

example (Ordner)
- example.info
- example.module
- example.js

Dann geht es auch schon los mit dem Code:

example.info

name = AJAX example
description = AJAX example module
core = 7.x
version = 7.x-1.0

example.module

<?php

/**
 * AJAX example
 *
 * @author Sven Culley <contact@sense-design.de>
 */

/**
 * Implements hook_init().
 */
function example_init() {
  drupal_add_js(drupal_get_path('module', 'example') . '/example.js');
}

/**
 * Implements hook_menu().
 */
function example_menu() {
  $items = array();
  $items['example/ajax/data'] = array(
    'title' => 'Get example data',
    'page callback' => 'example_get_data',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );

  return $items;
}

/**
 * Get example data
 */
function example_get_data() {
  // Get data from anywhere you like (database, external resource, ...)
  // For example we build a small table
  $header = array(t('Column 1'), t('Column 2'), t('Column 3'));
  $rows = array(
    array('Data 1.1', 'Data 2.1', 'Data 3.1'),
    array('Data 1.2', 'Data 2.2', 'Data 3.2'),
    array('Data 1.3', 'Data 2.3', 'Data 3.3'),
  );

  // Prepare output
  echo theme('table', array('header' => $header, 'rows' => $rows));
  exit;
}

example.js

(function ($) {
  Drupal.behaviors.example = {
    attach: function (context) {
      $('.linkclass').click(function () {
        var _this = this;

        $.ajax({
          url: $(_this).attr('href'),
          dataType: 'html',
          success: function (data) {
            if (data.length) {
              // Do something with the data
            }
          }
        });
        return false;
      });
    }
  }
})(jQuery);

HTML um den AJAX-Request ausführen zu können

<a class="linkclass" href="/example/ajax/data">Load data</a>

Fragen können gerne in den Kommentaren gestellt oder an contact@sense-design.de gerichtet werden.