Générateur de code Drupal: Créer un formulaire en AJAX avec Drupal

Cet exemple démontre comment il est possible de créer un formulaire (champ texte + bouton de soumission) en AJAX (donc sans rechargement de page).

La fonction de callback est importante car elle défini les opérations AJAX à réaliser à la soumission. On peut même imaginer disposer d'un processus de validation qui pourrait tout à fait afficher des messages d'erreurs à une place déterminée.

Vous pouvez ensuite disposer d'une validation et d'une fonction de soumission via laquelle l'enregistrement de données sera prévue.

Dans cet exemple, une classe a été définie et mise en préfixe du texte, mais cette classe peut être n'importe où dans la page. Les possibilités sont infinies.

Deux exemples sont fournis : le remplacement ou l'ajout, mais il en existe bien plus : consultez l'API de Drupal sur le sujet. Une fonction de mise à jour des css est également prévue dans cet exemple pour que le fond de l'affichage soit dans une couleur différente.

Remarquez que vous pouvez définir des callbacks également pour des éléments de fomulaire, ce qui est le cas de ce générateur de code (du coup pour ce générateur, aucun bouton de soumission n'est nécessaire).

<?php

/**
 * Implements hook_menu().
 */
function mon_module_menu() {
  $items = array();
  $items['mon_module'] = array(
    'title' => 'Titre de la page',
    'page callback' => 'drupal_get_form',
    'description' => 'Description de la page',
    'access arguments' => array('access content'),
    'page arguments' => array('mon_module_form'),
    'type' => MENU_NORMAL_ITEM,
    
  );
  return $items;
}

/*
  * Implements hook_form().
  * Pour afficher, utilisez drupal_get_form('mon_module_form'); dans une page ou un bloc, avec drupal_render pour afficher le formulaire.
  */
function mon_module_form(&$form) {
  $form = array();
  //Entrez vos éléments de formulaire ici (cf. le générateur d'élément de formulaire).
  $form['text'] = array(
    '#type' => 'textarea',
		'#prefix' =>'<div id="replace-wrapper"></div>',
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
		'#ajax' => array(
			'callback' => 'mon_module_callback',
		),
  );
  return $form;
}

/**
 * Helper function for AJAXif ying the form
 */
function mon_module_callback(&$form, $form_state) {
  $commands = array();
  //Nouveau texte
	$text = '<div id="replace-wrapper"></div>' . $form_state['values']['text'];
	$commands[] = ajax_command_css('#replace-wrapper', array('background-color' => '#F8FFF0', 'border' => '1px solid #234600'));
  //remplacement du texte
	$commands[] = ajax_command_append('#replace-wrapper', $text);
  //vide les valeurs du formulaire
  $new_form_state = $form_state;
  $new_form_state['input'] = array();
  $new_form = drupal_render(drupal_build_form('mon_module_form', $new_form_state));
  $commands[] = ajax_command_replace('#replace-wrapper',  $new_form);
  return array('#type' => 'ajax', '#commands' => $commands);
}

/*
  * Implements hook_form_submit().
  */
function mon_module_form_submit(&$form, $form_state) {
  drupal_set_message(t('Si vous aviez voulu, vous auriez pu enregistrer les données.'));
}

Commentaires

Il vaut mieux éviter les

Il vaut mieux éviter les majuscule pour info dans le nom des modules, chemins etc.

404 signifie "page non trouvée" : ton hook_menu n'a donc pas (encore) été reconnu.

Le générateur suppose de remplir les champs demandés : il ne faut pas laisser "mon_module" partout, mais bien renseigner le nomb de ton module (sans majuscule) pour que le code fonctionne bien.

...du verbe Drupaler (1er groupe)

Niveau

Usage

Dossier

Lien direct

Trouver un générateur

Menu mobile

Créer un formulaire en AJAX avec Drupal

Commentaires

Il vaut mieux éviter les

Ajouter un commentaire

Texte simple