Outils pour utilisateurs

Outils du site


cms:drupal:js

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

cms/drupal/js.txt · Dernière modification : 14/09/2008 16:20 de daniel