Comme indiqué dans un billet précédent, le calendrier est un widget sympathique que j’aime retrouver sur un blog. Il permet de cibler une période de l’année particulière (Noël, nouvel an, etc.). Cependant, force est de constater que le calendrier fourni par défaut par WordPress est plutôt lourd à utiliser.

Pourquoi s’amuser à recharger toute la page pour simplement changer de mois alors qu’une ancienne technologie appellée XMLHttpRequest existe ? C’est pourquoi, en cherchant sur la toile, je suis tombé sur un plugin répondant parfaitement à mes besoins : WP-Ajax-Calendar.

Pour le voir en action, regardez dans le menu à droite. Pour l’installer, c’est très simple. Il suffit de l’activer dans la partie d’administration (partie Plugins), et de remplacer la ligne d’appel de votre calendrier par :

Il ne vous restera alors plus qu’à personnaliser votre feuille de style. Etape sans doute la plus difficile. ;)

Afin d’augmenter un maximum l’ergonomie de vos formulaires Web, il peut être utile de mettre en place un script d’upload d’images en Ajax. Celui-ci permettra, par exemple, de ne pas laisser attendre l’internaute sur une page tierce, ni de recharger entièrement la page actuelle. Cette technique, évitant des lourdeurs certaines, n’est cependant pas aussi simple que cela à mettre en place : Ajax ne permet pas d’uploader des images. C’est dit.

Si l’upload de photos n’est pas permis en Ajax, nous n’allons pas utiliser celui-ci. Nous nous contenterons du Javascript. Plutôt que de s’embarquer dans une théorie longue et imbuvable, regardons immédiatement un exemple.

On commence par la réalisation d’un formulaire classique d’upload d’image.

Voici un formulaire tout ce qu’il y a de plus normal. On n’oublie surtout pas de spécifier l’attribut enctype dans la balise form, ainsi que la taille du fichier grâce à l’input hidden ci-dessus.

Notre upload d’images ergonomique réside en fait dans l’attribut target. On lui spécifie une iframe comme cible. Ainsi, plutôt que de recharger intégralement toute la page, le formulaire se contentera d’envoyer la page de résultat du script upload.php à l’intérieur de la frame concernée. Voyons donc le code de la frame en question…

Celle-ci est vide à l’origine. Et pour cause, elle ne servira qu’à récolter la réponse de l’envoi du formulaire. On remarque le display: none; permettant de ne pas polluer l’affichage.

On rajoute aussi une image, sans aucun attribut, si ce n’est un id. Cela n’est pas valide W3C, nous sommes d’accord. Remarquez que la frame n’est pas non plus très conseillée, mais bon, passons… Pour rendre votre code valide, il serait possible d’insérer dynamiquement l’image et la frame, lorsque vous en aurez besoin, via Javascript. Cependant, pour des raisons de simplicité d’explications, nous n’atteindrons pas un tel niveau de rigueur.

Le script upload.php nous retourne le code suivant :

Et c’est tout. Ainsi, notre image verra sa source modifiée, et sera donc dynamiquement mise à jour. Le tout sans rechargement sauvage de toute la page. Mission accomplie !

A noter que je laisse le soin au lecteur de gérer de manière sécurisée le téléchargement de l’image du client vers le serveur, chacun ayant ses petites habitudes en la matière. ;)