Skip to Content

Simpel: AJAX in Formularen

Profildaten in Häppchen editieren - so chick wie auf xing - wie geht das in Drupal ?

Die AJAX-Unterstützung in Drupal-Forms ist sehr weitreichend, aber nicht sonderlich gut dokumentiert: ein Beispiel.

Wunsch:

Mehrere Bereiche (hier Kontakt und Familie) können per Klick ihren Zustand zwischen ansehen und bearbeiten ändern.

Idee:

Tatsächlich ist jeder Bereich ein Formular, welches je nach Zustand entweder die gewünschten Werte nur ausgibt, oder mehrere Felder zur Eingabe hat. Der Toggle (oben-rechts) ist ein submit-Button , das den Zustand ändert.

 

 

 

 

 

Hier Kontakt im "Bearbeiten"-Modus ->

 

 

 

AJAX-Forms Grundgedanke:
  1. Jedes Submit-Button bekommt zusätzlich eine "#ajax"-Eigenschaft. Dieser enthält eine CSS-ID (in 'wrapper') und ein 'callback'. Diese Callbackfunktion liefert Formularelemente, die dann den Inhalt von 'wrapper' ersetzen soll.
  2. Das Formular muss an der gewünschten Stelle die 'wrapper'-ID haben. Sonst kann ja nichts ausgetauscht werden.
  3. Ein oder mehrere Callback-Funktionen, je nach Anforderung.

In meinem Fall möchte ich das gesamte Formular ersetzen - ein $form_state['state'] regelt per switch die Ausgabe.

Weil stets das gesamte Formular "ausgetauscht" wird, ist die '#ajax'-Eigenschaft immer die gleiche:

// AJAX-Part ist immer gleich:
$ajax = array(
  'callback' => '_myform_dummy_ajax_callback',
  'wrapper' => 'ajax-page-form',
  'method' => 'replace',
  'effect' => 'fade',
  'progress' => array('message' => NULL),  // do not show the "wait-message"-gif
);

Der 'callback' ist (wie erwartet) einfach:

function _myform_dummy_ajax_callback($form, $form_state) {
  return $form;
}

Nun muss noch die 'wrapper'-ID (hier: "ajax-page-form") das gesamte Formular umfassen. Das geht so:

function _myform_ajax_page_edit_form($form, &$form_state) {
 
  // This is replaced at each step.
  $form = array(
    '#prefix' => "<div id='ajax-page-form'>",
    '#suffix' => '</div>',
  );

 

Die Ausgabe des Formulars soll ja von $form_state['state'] abhängen. Die Zustände nenn ich "show" und "edit". Der Default ist "show". Eine Switch-Anweisung zeigt den gewünschten Inhalt und in jedem Switch-Zweig gibt es ein AJAX-Button, der den Zustand umschaltet.

Der (auf das zum verstehen gekürzte) Code sieht dann so aus:

function _myform_ajax_page_edit_form($form, &$form_state) {
 
  // moegliche states (oder steps) -> 'show', 'edit'
  // Default: 'show'.
  if (empty($form_state['state'])) {
    $form_state['state'] =  'show';
  }
  $state = $form_state['state'];
 
  // AJAX-Part of Button ist immer gleich:
  $ajax = array(
   'callback' => '_myform_dummy_ajax_callback',
   'wrapper' => 'ajax-page-form',
   'method' => 'replace',
   'effect' => 'fade',
   'progress' => array('message' => NULL),  // do not show the "wait-message"-gif
  );
 
  // This is replaced at each step.
  $form = array(
    '#prefix' => "<div id='ajax-page-form' class='state-$state'>",  // Status als Klasse dazu ausgeben
    '#suffix' => '</div>',
  );
 
  switch ($state) {
 
    // Zeige Inhalt
    case 'show':
 
      $form['content'] = array(
        '#markup' => "pipapo-irgendein-inhalt",
      );
 
      $form['edit_button'] = array(
       '#type' => 'submit',
       '#value' => t('edit'),
       '#submit' => array('_myform_ajax_page_submit_edit'),
       '#ajax' => $ajax,
      );
       break;
 
      // Zeige Formular
    case 'edit':
 
      ... diverse Formular-Felder
 
     $form['save_button'] = array(
         '#type' => 'submit',
         '#value' => t('save'),
         '#submit' => array('_myform_ajax_page_submit_save'),
         '#ajax' => $ajax
      );
      $form['cancel_button'] = array(
         '#type' => 'submit',
         '#limit_validation_errors' => array(),  // sonst funktioniert CANCEL nicht.
         '#value' => t('cancel'),
         '#submit' => array('_myform_ajax_page_submit_cancel'),
         '#ajax' => $ajax
      );
      break;
 
  } // switch state
 
  return $form;
}
 
/*
 * Die Button-Submits setzten im Wesentlichen ein neues 'state'.
 */
 
function _myform_ajax_page_submit_edit($form, &$form_state) {
  $form_state['state'] = 'edit';
  $form_state['rebuild'] = TRUE;
}
 
function _myform_ajax_page_submit_cancel($form, &$form_state) {
  $form_state['state'] = 'show';
  $form_state['rebuild'] = TRUE;
}
 
function _myform_ajax_page_submit_save($form, &$form_state) {
  // ... was auch immer gespeichert werden soll...
  $form_state['state'] = 'show';
  $form_state['rebuild'] = TRUE;
}

 

Fallstricke

Fazit

Deutlich mehr Usability und moderne Gestaltungsmöglichkeiten mit nur moderatem Aufwand.

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal6>, <java>, <javascript>, <php>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

Weitere Informationen über Formatierungsoptionen

CAPTCHA
Nerd oder Robot ?
co_put_r: