====== 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)