====== 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 * http://www.stellapower.net/content/drupal-js-coding-standards-final-version * et un site très riche sur l'ajax en général http://www.webjax.eu/, avec les articles [[http://www.webjax.eu/r/14-JQuery-javascript-framework-ajax-library-jquery-j-query-Framework-Javascript-Library-Ajax-asyncronous-web2.0-ria-dom-control-enhancer|jQuery ]], dont [[http://www.webjax.eu/p/230-JQuery-utilities-utilitaires-javascript-framework-ajax-library-jquery-j-query-Framework-Javascript-Library-Ajax-asyncronous-web2.0-ria-dom-control-enh|Utilitaires JQuery]], [[http://www.webjax.eu/p/225-JQuery-manipulation-dom-javascript-framework-ajax-library-jquery-j-query-Framework-Javascript-Library-Ajax-asyncronous-web2.0-ria-dom-control-enhancer|Manipuler le modèle DOM avec JQuery]] et [[http://www.webjax.eu/p/223-JQuery-attributs-attributes-javascript-framework-ajax-library-jquery-j-query-Framework-Javascript-Library-Ajax-asyncronous-web2.0-ria-dom-control-enha|Attributs JQuery]] Avec quelques posts qui parlent de drupal/js (pour voir la syntaxe à travers qq exemples) * http://www.chapterthree.com/blog/josh_koenig/quick_jquery_usability_tip_automatically_clear_restore_useful_default_values * http://groups.drupal.org/node/9935#comment-33291 (pas très utile ici mais donne des idées pour la syntaxe à utiliser)