Rien à dire, avec jQuery et quelques petits plugin on peut faire de vrais merveilles. Une gallerie de photos fort étonnante. Tiens, ça me donne envie de recoder un peu mon outil de photoblog développé avec Code Igniter, bien que le temps me manque en ce moment…

On connaît bien jQuery, mais tout le monde n’est pas forcément au courant de la possibilité de profiter d’une petite portion de la syntaxe de XPath afin d’exploiter encore plus la librairie JavaScript.

Concrètement XPath vous permet d’extraire efficacement des portions d’un document XML ou XHTML. Grâce à Google j’ai pu repérer la page relative à XPath pour jQuery, ce dernier utilisant n’utilisant qu’une petite partie de la syntaxe, mais qui peut tout de même s’avérer très utile dans plusieurs situations.

Si vous utilisez jQuery, je vous suggère de faire le détour

Pour en savoir plus sur XPath, je vous renvoie à WikiPedia et à W3Schools afin d’avoir des compléments d’information et voir concrètement de quoi il s’agit.

Avec quelques jours de retard il est là . A l’affiche on trouve:

• an editor’s note about the magazine
• a profile of jQuery’s founder, John Resig
• an introduction to jQuery’s basic principles
• an argument for jQuery’s philosophy
• an interview with the creator of the jqMinMax …
• a roundup of three plugins that are useful for…
• a really cool back-page ad (check it out!)

Jusque là j’ai principalement utilisé jQuery uniquement pour me rendre la tâche plus facile lors de la manipulation dynamique des différents éléments constituant une page XHTML donnée.

Ce soir j’ai trouvé enfin un peu de temps pour aller un peu plus loin pour enfin explorer le moyen de faire du Ajax en passant par ma librairie JavaScript fétiche :P. La tâche a été très simple grâce à la documentation en ligne qui n’est compréhensible pas totalement compréhensible pour les personnes débutant avec la librairie, enfin…

Le but de l’exercice est le suivant:

• Créer un formulaire avec quelques champs texte
• Envoyer le formulaire, pendant le traitement afficher une image/loader
• Déterminer comment passer les variables au fichier PHP pour leur traitement, ce dernier effectuant un traitement bidon qui va prendre quelque secondes lors de son exécution
• Afficher un feedback au terme de l’exécution du script PHP

Comme d’habitude, regardez l’exemple. Si vous regardez le code source, vous oberverez que nous n’allons pas mélanger le XHTML avec le JavaScript et que le formulaire pourra être traité même si le navigateur n’a pas activé le JavaScript.

Brève explication du script:

• Tous d’abord on va indiquer au système d’afficher une image animée lorsqu’un appel en ajax est en cours, le cacher une fois l’appel terminé;
• Ensuite, on démarre le traitement asynchrone du formulaire lorsqu’on appuye sur le bouton de submit;
• On récupère les valeures des deux formulaires qu’on ira par la suite envoyer au fichier php pour leur traitement
• On définit si faire un _POST ou un _GET ainsi que le fichier de traitement
• Pour finir, le feedback positif

$(document).ready(function(){
  $("#ajax-loader").ajaxStart(function(){
    $(this).show();
  });

  $("#ajax-loader").ajaxStop(function(){
    $(this).hide();
  });

  $("form").submit(function(){
    prenom = $("input[@name=prenom]").val();
    nom = $("input[@name=nom]").val();

    $.ajax({
	type: "POST",
	url: "jquery.php",
	data: "prenom="+prenom+"&nom="+nom,
	success: function(){
	  $("#feedback").html("Formulaire enregistré avec succès");
  	}
     });

      return false;

    });
});

Le tour est joué en quelques lignes de code, sans prise de tête. Dans le prochain article, nous montrerons comment récupérer des informations du fichier de traitement pour les afficher sur le site.

Bientôt disponible un magazine électronique de ma librairie javascript préférée. Initiative de l’auteur de visual jQuery, elle sortira tous les troisièmes mercredis du mois, composée d’environ 12-16 pages et surtout gratuit. J’attends avec impatience le 20 septembre.

Loin derrière moi l’époque où je donnais des claques lorsqu’on me parlait de JavaScript… Aujourd’hui les interfaces deviennent de plus en plus riches et souvent les CSS sont trop limitées - enfin, certains navigateurs sont encore à la traine et ne profitent pas pleinement de la technologie - pour permettre à des gens comme moi de tout gérer sans problèmes - sans oublier les obstacles liés à la compatibilité cross-browser.

JavaScript revient en force pour nous aider, grâce aussi à l’explosion du web2.0 qui nous amène à l’utiliser davantage. L’article The future is hybrids – how JavaScript can purify pure CSS solutions est un bonne lecture pour se familiariser avec tout ce bazar et pour faire une integration optimale des deux composantes qui gérent l’aspect visuel de votre site et son comportement. Bonne lecture.

Un site à découvrir - jquery.info -, tout récent d’après les archives, pour les débutants et les confirmés qui veulent toujours en savoir plus sur la librairie javascript jQuery, le tout en français, chose assez rare. Bravo à Fil!

• jQuery: Why jQuery’s Philosophy is Better. En gros le billet montre les avantages à utiliser jQuery par rapport à d’autres framework.
• Font Tester: pour tester en direct les font
• Displaying percentages: comment créer une barre de progression en CSS
• YShout 3: une shoutbox en Ajax
• CSS Optimization: Make Your Sites Load Faster for Free: comment optimiser les CSS, quels outils sont les plus efficaces

Avant de commencer, quelques liens vers la documentation en ligne de jQuery:

• documentation
• quelques tutoriels
• une liste de plugins
• version stable et en développement
• mailing list

Développer un plugin pour jQuery est particulièrement intéressant car on peut bénéficier d’une librairie JavaScript flexible, légère qui permet d’effectuer facilement des manipulations DOM, des effets et des animations simples ou avancées et surtout du Ajax. La mise en place d’un plugin va vous permettre de l’appliquer facilement a n’importe quel contexte.

(more…)

En quoi consiste concrètement l’utilisation du DOM et pourquoi l’utiliser? De manière générale, travailler avec le DOM vous permet de parser l’arborescence d’une page (X)HTML et de manipuler les différents objets la constituant. On peut aller encore plus loin notamment en manipulant également les CSS liées à la page.
(more…)