Prendre un Café - ajax

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

Une messagerie instantanée embarquée à votre site

NiKo — Sun, 12 Mar 2006 21:46:49 +0000

[Via Scoopeo]

Gabbly est un truc de dingue. Ce n'est ni plus ni moins qu'un client de messagerie instantanée tout javascript et AJAX intégrable à tout site qui en fait potentiellement la demande. Fil RSS des conversations inclus, cela va de soi. C'est gratuit, c'est sympa, c'est top.

Pour essayer le service sur ce site, cliquez ici. Pour le fil RSS, c'est par là.

En vrac

NiKo — Tue, 14 Feb 2006 16:46:15 +0000

Pfiouuuu, pas vraiment le temps de bloguer ces derniers temps, donc voila une petite selection en vrac de liens interessants...

Ajax Rating est un système de notation en AJAX.
Les jours de Flash sont-ils comptés ? Pas sûr.
Panoramio combine Google Maps et galleries photos. Super sympa.
Tout le monde en parle, avec raison : XGL va révolutionner nos desktop libres. Et pour les aigris qui argueraient qu'OS X a mis en place ce genre d'effets avant, je leur ferais remarquer que Mac OS X est loin d'être un projet libre et gratuit accessible à tous.
Les États-Unis vont mieux, beaucoup mieux [via]
Free pète les plombs. Je n'ai jamais eu de souci avec eux, mais ce genre de pratiques seraient à deux doigts de me faire changer de fournisseur d'accès.
À faire lire à toutes les DSI de la Terre : Don't invent XML languages.
Une bonne liste de jeux sous Linux.
Pop Pirates, excellent petit shoot'em up en flash.
Alexadex : boursicotez virtuellement en spéculant sur la valeur des sites internet. Achetez des actions prendreuncafe.com !
Et enfin, last but not least, un générateur de code PHP révolutionnaire. Pitié, ne me traînez pas en justice, ceci n'est pas de la diffamation.

Ah, oui, je prépare un tuto pour Rails, mais ça fait quatre fois que je le réécris car à chaque fois je trouve une méthode encore plus simple... Just be patient.

Bouse 2.0

NiKo — Sun, 20 Nov 2005 17:22:59 +0000

Ajax, c'est mieux quand ça marche, ça évite de passer pour des brêles en profitant du buzz.

Lien : Un whois en Ajax.

Calendes, riez !

NiKo — Sun, 06 Nov 2005 00:00:43 +0000

Lecteur, mon ami, tu vas peut-être pouvoir m'aider : je cherche desespéremment une solution en ligne de gestion d'agenda. Dans mon ancien boulot, je bavais d'envie devant les fonctionnalités d'iCal sur Mac. Je voudrais retrouver la même chose, mais si possible en ligne, avec moult AJAX pour l'utilisabilité au quotidien et le plaisir des yeux. Genre la fonctionnalité qui tue : dessiner ses rendez vous sur le calendrier, à la dizaine de minute près, sans passer par d'immondes boites de dialogue de sélection de dates. Idéalement, il supporte un format ouvert comme iCalendar pour éventuellement partager l'agenda et travailler collaborativement.

Bon, pour vous épargner de vains efforts, voila ce que j'ai déjà testé :

Planzo

Peut-être ce qui se rapproche le plus de ce que je recherche. On peut peindre ses rendez-vous, les déplacer graphiquement, les partager avec d'autres utilisateurs, recevoir des alertes par email, flux RSS... Malheureusement, je trouve les interfaces un peu moches (même si elles restent customizables), les semaines commencent le dimanche, le pas minimum d'un rendez-vous est la demi-heure, c'est en anglais uniquement, le clic-droit est désactivé ^[1]...

Mozilla Calendar

C'est une extension XUL pour Mozilla/Firefox/Thunderbird permettant de gérer un calendrier complet et de le synchroniser à distance. Malheureusement, je n'aime pas vraiment l'interface et - plus gênant - de vilains bugs surviennent parfois, effaçant les précieuses données préalablement saisies. Enervant !

Dans mon cas, il faudrait impérativement que la source de données soit centralisée sur un serveur, et je ne sais pas si cette extension est capable d'aller écrire les données sur un fichier distant... Quelqu'un a t-il déjà réussi ?

Notez également qu'il existe une version standalone, Sunbird.

Remember the milk

L'idée est interessante, puisqu'il est possible de gérer une liste de taches à effectuer, et d'éventuellement la partager. On peut aussi envoyer des tâches par email et un webservice iCalendar est disponible. Hélas, pas de calendrier en ligne et je n'arrive pas à publier mes tâches via l'extension Mozilla Calendar et sa gestion du protocole webcal (en fait, je ne crois pas que cela soit possible). De plus, l'ergonoimie laisse franchement à désirer, on a un peu de mal à s'y retrouver.

BackPack

Backpack ne propose pas de calendrier mais un système de gestion de tâches, à la manière de Remember the Milk. C'est, truffé d'AJAX, mais à mon sens ici utilisé à mauvais escient. Un bon point cependant, la possibilité de travailler sur un document XHTML collaborativement, un peu à la façon d'un WIKI.

Time-Tracker

Toujours pas de calendrier à proprement parler, mais une liste de tâches à affectuer. Encore une fois, c'est bourré d'AJAX, et même de Flash, sous la forme d'une petite horloge dont on peut manipuler les aiguilles afin de déterminer l'heure d'un rendez-vous.

Pas convaincu du tout.

WebCalendar

WebCalendar est une application PHP à installer sur son propre espace d'hébergement. L'installeur n'a jamais voulu fonctionner, j'ai renoncé. Et puis les captures d'écran - et plus encore, la démo en ligne - ne m'ont pas vraiment donné envie d'aller plus loin.

PHPiCalendar

PHPiCalendar est une interface de consultation de calendrier au format iCal, écrite en PHP. Hélas, il semble impossible de gérer le calendrier, qui reste accessible en lecture seule uniquement.

Voila où en sont mes investigations. Si vous connaissez quelque chose approchant mon petit cahier des charges personnel, n'hésitez pas à le signaler dans les commentaires. Sinon, je trouve que ça serait un chouette projet à developper. Avis aux amateurs

Notes

[1] ... et oui ma pauv'dame. En 2005...

Debugging AJAX facile avec Firefox

NiKo — Sun, 26 Jun 2005 19:42:43 +0000

Peut-être cette astuce est-elle déjà archie connue de tous, mais moi je suis drôlement content de l'avoir trouvée : je développe beaucoup en AJAX ces derniers temps, et lorsque l'on injecte du contenu dynamique via javaScript dans un élément de l'arbre DOM, il est très difficile de voir le code source HTML du contenu injecté.

Heureusement, Firefox dispose d'un outil fort pratique : la possibilité de voir la source HTML de la sélection (menu contextuel clic-droit sur une selection dans une page). L'avantage de cette fonctionnalité est qu'elle affiche la source du contenu chargé post-traitement, c'est à dire notamment après nos fameuses injections ! D'ailleurs cela marche également avec le contenu généré par javaScript seul

Ce qui nous donne, en affichant normalement la source de la page :

Si on affiche la selection de la zone chargée dynamiquement :

Une astuce pour afficher rapidement le code source post-traitement d'une page, le focus étant fait sur celle-ci, revient à faire CTRL + A, Clic-droit -> Code source de la sélection.

PS : Les plus observateurs avides de remontrances signaleront que générer des formulaires en javaScript est tout sauf accessible, et ils auront raison. Mais je tiens de suite à préciser qu'il existe une version du site en cours de dev disposant d'une version en html statique

Edition du 27/06/2005

Je note avec amusement que le code source affiché par la fonction Code source de la sélection modifie le code source original. Je m'explique : admettons que l'on écrive cette portion de code XHTML :

<form name="form1" id="form1" action="./">
  <label for="q">Rechercher</label><br />
  <input type="text" name="q" id="q" value="" style="background:#eee url(images/bgq.png) no-repeat top left" /><br />
  <input type="hidden" name="a" id="a" value="search" />
  <input type="submit" name="s" id="s" value="Rechercher" />
</form>

L'affichage du code source de la selection du formulaire affichera :

<form name="form1" id="form1" action="./">
  <label for="q">Rechercher</label><br>
  <input name="q" id="q" value="" style="background: rgb(238, 238, 238) url(images/bgq.png) no-repeat scroll left top; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;" type="text"><br>
  <input name="a" id="a" value="search" type="hidden">
  <input name="s" id="s" value="Rechercher" type="submit">
</form>

On notera que Firefox réinterprète le code source en le formattant à sa sauce, notamment au niveau des styles mais surtout en transformant les balises fermées correctement (<balise />) en balises HTML-like (<balise>). Bon, la validation passe quand même au validateur puisque ce dernier ne vérifie pas les sorties javascript.

Voilà, c'était juste à titre anécdotique en fait

Moteur de recherche sympa : A9

NiKo — Thu, 16 Jun 2005 12:31:46 +0000

En fouinant dans mes referers, je suis tombé sur un moteur de recherche dont j'ignorais jusqu'ici l'existence : A9. Je dois dire que c'est la première fois depuis belle lurette que je me dis : Wow, voilà peut-être une alternative sérieuse et crédible à Google !.

A9 fait la part belle aux dernières technologies comme AJAX, c'est un vrai régal à utiliser. Sans compter la présence de colones de résultats spécifiques (images, vidéos, livres, réfénrences, définitions, pages jaunes, et des centaines d'autres types de filtrages - tous configurables après une inscription auprès d'Amazon.com^[1]).

Seuls petits reproches pour l'instant, l'impossibilité de filtrer les résultats par langue et - comme souvent hélas - la présence de publicités en tête des pages de réponses (vite, un script Greasemonkey ^^').

Edit

Il y a même une extension Firefox dédiée : A9 Toolbar.

Comme le fait remarquer neolao, A9 est finalement plus un gestionnaire de recherches qu'à proprement parler un moteur. Quoi qu'il en soit, l'utilisation d'AJAX y est vraiment interessante à étudier

Notes

[1] A9 est une entreprise du groupe Amazon.

Ne vous fiez pas à son nom : SproutLiner

NiKo — Thu, 14 Apr 2005 18:12:11 +0000

Je viens de tomber sur un site proposant un service très interessant, simplissime et potentiellement très utile : SproutLiner (ne riez pas, ça n'est pas sale). Il s'agit d'un gestionnaire de projet en ligne, ultrasimple.

Pour créer un gestionnaire de suivi de projet en ligne, c'est très simple, il suffit d'entrer le nom du projet et d'appuyer sur Entrée. Après, on se retrouve dans une interface sobre permettant d'ajouter ligne et colonnes, listes, checkboxes, champs texte... Tout cela est bien évidemment gavé de XMLHttpRequest, la techno javaScript permettant le rapatriement de données externe dans l'objet DOM de la page en cours de consultation (voir à ce sujet mon billet sur LiveSearch).

Mine de rien, voila un micro-outil permettant de partager une roadmap très simple, pour un projet collectif par exemple. Voire même pour organiser une petite soirée entre ami, ça peut donner ça :

Ce qui est interessant avec l'utilisation de XMLHttpRequest que fait ce service, c'est la sauvegarde en temps réel des données au moment même de leur saisie. Impossible de perdre des données !

Bon, pour ceux qui sont interessés pour la soirée chez René, il leur suffit de tapper Soirée Foot chez René dans le champs Registered users