Wiki lairdutemps.org

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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:
<code php>
// 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' => ''));
}
</code>
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.
<code javascript>
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
        }
      );
    });
  }
});
</code>
et coté php ça donne
<code php>
// ...
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
}
</code>
===== 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)