Carsten Rhein, Drupal-Entwickler

Ajax in Drupal

Ajax in Drupal | Teil 2

Im zweiten Teil geht es um die Nutzung des im ersten Teil vorgestellten Ajax-Frameworks innerhalb von Formularen.

Ajax in Forms | #ajax

Die Formular-API bietet eine direkte Integration des Ajax-Frameworks. Hier kann auf die Verwendung von einem separaten Menu-Callback vezichtet werden. Außerdem braucht kein Array aus Ajax-Kommandos zurück gegeben werden. Dies wird alles bereits von der FAPI-Integration übernommen.

Szenario

  • Ein Formular auf einer Seite mit
    • Text-Feld
    • Submit-Button
  • Beliebiger Text wird im Formular eingegeben.
  • Nach Klick auf Submit erscheint der eingegebene Text auf der Seite

Umsetzung

hook_menu()

Zunächst wird die Implementierung von hook_menu benötigt:

<?php
/**
* Implements hook_theme().
*/
function my_module_menu() {
 
$items = array(
   
'my_module_form' => array(
     
'page callback' => 'drupal_get_form',
     
'page arguments' => array('my_module_form'),
     
'access callback' => TRUE,
     
'type' => MENU_NORMAL_ITEM,
    ),
  );
  return
$items;
}
?>

Hier wird die Seite mit dem Formular registriert. Nichts spezielles.

Das Formular

Als nächstes wird die Formular-Funktion benötigt:

<?php
/**
* Menu callback form function.
*/
function my_module_form() {
 
$form['text'] = array(
   
'#type' => 'textfield',
   
'#title' => t('Text'),
  );
 
$form['submit'] = array(
   
'#type' => 'submit',
   
'#value' => t('Submit'),
   
'#ajax' => array(
     
'wrapper' => 'post-box',
     
'callback' => 'my_module_ajax',
    ),
  );
 
$form['post-box'] = array(
   
'#markup' => '<div id="post-box"></div>',
  );
  return
$form;
}
?>

Der Submit-Button bekommt das Attribut '#ajax' worin der Wrapper, also welches Element ersetzt ('replace' ist default) werden soll, und die Callback-Function angegeben wird.

Zusätzlich wird noch ein leeres DIV übergeben, welches durch Ajax mit neuem Inhalt ersetzt wird.

Die Callback-Function

Die im Formular angegebene Funktion muss zur Verfügung stehen:

<?php
/**
* Ajax callback function.
*/
function my_module_ajax($form, $form_state) {
 
$text = check_plain($form_state['values']['text']);
  return
'<div id="post-box">' . $text . '</div>';
}
?>

Hier wird lediglich der Inhalt des Text-Feldes gefiltert, in einen div-Container gesteckt und zurück gegeben.

Es können aber auch komplexere wie im ersten Teil beschriebene Kommandos in einem $page-Array zurück gegeben werden. Dies ist lediglich die einfachste denkbare Implementierung, da auch hier die Möglichkeiten des gesamten Ajax-Frameworks zur Verfügung stehen.