Un plugin jQuery pour générer des plans automatiquement

NiKo — Sun, 08 Jun 2008 16:59:00 +0200

Avec un temps pareil, autant coder des plugins jQuery, non ?

Quelques heures de boulot plus tard, jqplanize^[1] est né et permet de générer automatiquement une table des matières extraite de la hiérarchie induite de la séquence des titres d'un document HTML^[2].

La doc est sur la page d'accueil du projet (hébergée chez Google), ou plus exhaustivement sur cette page dédiée du présent site, avec quelques exemples live.

Le code semble fonctionner sous Firefox 3 RC2 et Safari 3.1, mais ça ne marche curieusement pas sous Opera 9, et j'ai pas testé sous IE donc attendez vous à des updates^[3].

Vivement l'été.

Notes

[1] Non mais vous avez déjà vu un nom aussi naze ?

[2] Si tant est que le balisage des titres soit sémantique, hein.

[3] Ou pas, bien entendu.

Dégradabilité javascript et Ajax dans Symfony avec jQuery

NiKo — Wed, 03 Oct 2007 11:31:00 +0200

Pour un projet, je suis en train d'utiliser la librairie javascript jQuery dans Symfony, en lieu et place du couple prototype et scripaculous dont je vous avait déjà parlé.

L'idée est ici de ne pas avoir à utiliser les helpers fournis par Symfony (qui mettent en oeuvre exclusivement Scriptaculous) et ainsi d'éviter d'utiliser les deux librairies simultanément sur le projet, mais aussi de décoreller le code javascript des templates et de favoriser une meilleure dégradabilité de ce dernier.

Par exemple, au lieu d'utiliser la fonction link_to_remote() dans notre template, on peut tout à fait imaginer d'employer un bon vieux link_to() des familles et de lui appliquer une classe css qu'on va pouvoir cibler depuis jQuery afin d'effectuer un appel AJAX pointant vers l'url présente dans l'attribut href du lien. Avec un exemple, c'est un peu plus clair :

<?php echo link_to('Mon lien', '@maroute?monparam=mavaleur', array('class' => 'ajax_link')) ?>

Dans un fichier javascript (jQuery doit bien entendu être chargé) :

$(document).ready(function() {
  $('a.ajax_link').click(function()
    {
      $.ajax(
        {
          type: 'post',
          url: $(this).attr('href'),
          success: function(msg)
          {
            alert("Résultat: " + msg);
          }
        });
      return false;
    }
  );
});

Avantage supplémentaire, vous continuez à bénéficier du système de routing Symfony (pas d'urls en dur dans les fichiers javascripts externalisés.)

Là où Symfony va également nous aider, c'est au travers de sa gestion native de la décoration d'une vue en fonction du type d'appel HTTP : le framework va detecter si l'action a été appelée ou non depuis une requête XmlHttpRequest et, si c'est le cas, décorer la vue avec le layout global de l'application et donc présenter à vos utilisateur le résultat escompté, qu'ils aient activé javascript ou non pour surfer sur votre site.

Si vous désirez mettre à jour un élément de l'arbre DOM avec le contenu reçu d'une requête Ajax, voici une autre petite astuce ; on va utiliser une ancre dans l'url et s'en servir comme argument décrivant l'id DOM qu'on veut mettre à jour :

<?php echo link_to('Mon lien', '@maroute?monparam=mavaleur#mon_div', array('class' => 'ajax_link')) ?>
<div id="mon_div" style="display:none"></div>

Et en javascript :

$(document).ready(function() {
  $('a.ajax_link').click(function()
    {
      var href = $(this).attr('href');
      var target = href.substring(href.lastIndexOf('#'), href.length);
      $.ajax(
        {
          type: 'post',
          url: href,
          success: function(msg)
          {
            if ($(target))
            {
              $(target).html(msg).show('slow');
            }
          }
        }
      );
      return false;
    }
  );
});

Note : on aurait pu aussi détourner l'attribut target à cette fin mais ce dernier n'est pas valide en XHTML strict.

Bien entendu, ceci n'est qu'un microscopique aperçu de l'étendu des possibilités de jQuery et de son intégration possible avec Symfony (ou d'autre frameworks et langages, bien entendu.)

Prendre un Café - Tag - jquery

Un plugin jQuery pour générer des plans automatiquement

Notes

Dégradabilité javascript et Ajax dans Symfony avec jQuery