Table des matières
Javascript
Drupal 6 fourni pas mal de choses toutes prêtes pour faire de l'ajax simplement, mais pas si simplement que ça quand on est pas familier de ahah & jQuery et de la façon dont c'est utilisé dans drupal (qqun qui connait bien prototype et scriptaculous peut être un peu dérouté par ex).
ahah
Avec drupal, on peut faire de l'ajax sans écrire de code js , mais ce que j'ai testé était tellement bourrin (envoi du form complet à chaque requête ajax) que je suis passé à autre chose.
ex:
// dans hook form_alter, on ajoute nos params ahah pour tous les selects taxo foreach ($form['taxonomy'] as $vid => $taxonomy_entry) { if ($taxonomy_entry['#type'] == 'select') { // on a aussi #multiple de dispo au besoin $form['taxonomy'][$vid]['#ahah'] = array( 'path' => 'eduforge/taxonomy_change/' .$vid, 'event' => 'change', 'wrapper' => 'eduforge_taxonomy_change_output', // pour debug car on a pas besoin du retour (comme les 2 lignes suivantes) 'method' => 'replace', // ou append ou after ou before... 'effect' => 'fade', ); } } // dans hook_menu $items['eduforge/taxonomy_change/%'] = array ( 'page callback' => 'eduforge_taxonomy_change', 'page arguments' => array (2), 'type' => MENU_CALLBACK, /// ... ); function eduforge_taxonomy_change($vid) { // print et pas return car on ne veut pas de theming // print('Appel avec $vid=' .$vid .' bien reçu.'); // on récupère notre form dans $_POST // nos traitements // avec ahah, faut renvoyer au moins ça, sinon ça fait une erreur js drupal_json(array('status' => TRUE, 'data' => '')); }
cf http://api.drupal.org/api/file/developer/topics/forms_api_reference.html/6#ahah
Avec un fichier js
Pour choisir plus précisément ce que je voulais envoyer, et quand, je suis donc passé par un fichier js.
Drupal.behaviors.sendNewChoice = function (context) { // tout ça va être lancé dès que le dom, drupal.js et autres jquery.js seront chargés, et ajouté aux behaviors de drupal $('.form-select:not(.sendNewChoice-processed)', context).addClass('sendNewChoice-processed').each(function () { // pour chaque balise select de classe css '.form-select' qui n'a pas la classe '.sendNewChoice-processed' // ajouter la classe '.sendNewChoice-processed' et faire ce qui suit var formSelect = $(this); // car $(this) pas toujours propagé (ici ça devrait marcher sans) var id = $(this).attr("id"); // on récupère l'id du select if (id.substr(0,14) == 'edit-taxonomy-') { // si l'id commence par... formSelect.change(function(){ // on lui ajoute une fonction sur l'évènement 'change' var optionsSerialized = formSelect.serializeArray(); // serialize() tout court construit qqchose façon urlencode, pour du post on préfère un tableau $.post("/eduforge/taxonomy_change", optionsSerialized, function(data){ alert("On récupère : " + data); // juste pour debug } ); }); } });
et coté php ça donne
// ... drupal_add_js(drupal_get_path('module', 'eduforge') .'/edulibre.js'); // ... function eduforge_menu() { // ... $items['eduforge/taxonomy_change'] = array ( 'page callback' => 'eduforge_taxonomy_change', 'type' => MENU_CALLBACK, // ... ); // ... return $items; } function eduforge_taxonomy_change() { // traitements drupal_json($_POST); // juste pour debug // on récupère bien $_POST['taxonomy'][$vid][$i] = $term_id }
liens
- http://drupal.org/node/114774#javascript-behaviors (pour ahah, succint)
- pour pointer un élément du DOM, cf http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want
- la FAQ jQuery http://docs.jquery.com/Frequently_Asked_Questions
- pleins de tutos jQuery sur http://docs.jquery.com/Tutorials, dont pas mal en français
http://docs.jquery.com/Tutorials#Tutoriaux_en_Fran.C3.A7ais
- et un site très riche sur l'ajax en général http://www.webjax.eu/, avec les articles jQuery , dont Utilitaires JQuery, Manipuler le modèle DOM avec JQuery et Attributs JQuery
Avec quelques posts qui parlent de drupal/js (pour voir la syntaxe à travers qq exemples)
- http://groups.drupal.org/node/9935#comment-33291 (pas très utile ici mais donne des idées pour la syntaxe à utiliser)