Prendre un Café

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