...du verbe Drupaler (1er groupe)

Créer un formulaire en AJAX avec Drupal

7. Mars 2012 - 21:56 -- Wilfrid
4.130435
Average: 4.1 (23 votes)
Votre vote: Aucun(e)
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).

Commentaires

Soumis par elgringo (non vérifié) le

//Création de dossier sous : all/modules/Ajax_Modules->Ajax_Module.module +Ajax_Module.info +activation via partiue admin et j'y copie ce code :

<?php

/**
* Implements hook_menu().
*/
function mon_module_menu() {
$items = array();
$items['Ajax_Module/C'] = 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.'));
}

?>

Cela m'affiche cela

Uh-oh, something went wrong! Error Code: 404

C'est normal??je vois d'ou viens le probleme

Soumis par Wilfrid le
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.

Ajouter un commentaire

Texte simple

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
CAPTCHA
Image CAPTCHA