A l’instar du classique formulaires de commande sur internet, par exemple, avec sa fameuse case à cocher de validation des CGV (Conditions Générales des Ventes) avant finalisation de la commande en ligne, ce billet vous permettra de valider un formulaire selon un choix prédéfini dans un menu déroulant.
– Si le bon choix est fait, le formulaire est envoyé au clic sur le bouton d’envoi.
– Sinon, on peut déclencher une boîte d’alerte et bloquer l’envoi du formulaire.

C’est une demande récurrente de clients : « Faites-moi un champ de saisie de texte où on peut mettre du gras, de l’italique, des listes et des couleurs, comme Word« … L’objectif étant bien entendu de récupérer cette mise en forme, en général pour la stocker dans une base des données.

HTML ne permettant pas ce type de fantaisies, il faut donc se tourner vers les « éditeurs de texte » open-source. Il y en a quelques uns, je présente ici l’intégration de Tiny-MCE. C’est à la fois l’un des plus abouti, et des plus simple d’utilisation. C’est celui qu’a choisi le N°1 des moteur de blog (WordPress) : ce n’est pas pour rien…

DatePicker est l’un des widgets proposées gratuitement par le moteur JavaScript JQuery-UI. Nous en avions parlé dans un article précédent (cf. Autocomplétion du champ de texte avec JQuery-UI) : cet outil est un peu une « usine à gaz » mais les résultats sont néanmoins assez éblouissants…

La fonctionnalité présentée ici est un petit calendrier d’aide à la saisie qui remplit automatiquement la date dans un champ de texte lorsqu’on sélectionne un jour. Finis les jj-mm-AA ou jj/mm/AAAA : le champ sera auto-rempli, et surtout, il est au bon format si vous avez besoin par exemple de la stocker, par exemple, dans une base des données.

L’auto-complétion consiste à proposer une pré-sélection de valeurs dans le champ texte d’un formulaire.
Ces valeurs sont extraites à la volée d’une base des données, et contiennent le caractère (ou la chaîne de caractères) déjà saisi par l’utilisateur.

Cette fonction utilise AJAX (JavaScript + PHP), c’est à dire qu’il n’est pas nécessaire de recharger une page pour extraire dynamiquement et afficher les valeurs souhaitées depuis une base des données. Le moteur utilisé dans cet exemple est JQuery-UI (puissant JavaScript opensource)

3 possibilités :

– Content-Type: application/javascript
– Content-Type: application/x-javascript
– Content-Type: text/javascript

1 seule bonne réponse (bip, bip, bip, … ^^ )   […]

Ajax ? Fastoche… Un vulgaire JavaScript (mal) nommé XmlHtpRequest ^^
Comment créer un « Loading… » à la Gmail sur une requête de type  » remote scripting  » : mode d’emploi en 4 temps (comme les valses !)  […]

Joomla, Prestashop, Worpress, etc., bref tous les CMS dignes de ce nom sont équipés d’éditeurs de textes permettant de la saisie « riche » sans code (autrement dit des mises de type gras « gras », « italique », « listes », etc.. :
Joomla par exemple utilise l’éditeur de texte HTML JCE, d’autres TinyMCE : tout fonctionne avec des icônes, c’est plus rapide, plus néophytes, et … en général plus sale en terme de code ! Mais qu’importe, pour écrire un petit billet sur son site perso, c’est quand même bien pratique, et sans copier-coller … on perd cet avantage de la facilité.

J’ai rencontré ce problème avec PrestaShop et Joomla : impossible de faire un copier-coller avec Firefox. En ce moment j’utilise la version 8 mais apparemment ce problème existe depuis longtemps chez Mozilla. Firefox a décrété qu’il s’agissait d’une faille de sécurité et crac ! ferme tout pour tous partout

On peut contourner  cette pénible restriction sans problème et sans risque, au moins en local pour tester ses sites avec Wamp Server ou EasyPHP par exemple …

Vous souhaitez ajouter un bouton Facebook à votre site web ou à votre blog pour inviter vos lecteurs à partager ce qu’ils découvrent sur vos pages sur Facebook ? Tout comme les boutons de Tweet, ce sont des duplicateurs d’audience efficaces.

C’est très simple, il existe même sur le site de Facebook une méthode pour récupérer des « bouts de code » à copier-coller…

Twitter, on adore ou on déteste, mais c’est un duplicateur d’audience incontournable pour les sites.

Le principe : un petit bouton qui permet à tout utilisateur qui a aimé une page de votre site d’en envoyer l’URL simplifiée sur les fils de Tweet en un seul clic : génial…

1.   Comment trouver la latitude et la longitude exacte d’un emplacement sur Google Map ?

2.   Inversement, comment trouver un emplacement sur Google Map quand on possède ses coordonnées latitude / longitude ?

Petites questions bêtes, mais presque quotidiennes, que ce soit pour les utilisateurs de GPS, les developpeurs web qui souhaient intégrer une carte Google sur un site, etc.

La réponse est simple …

Nous avions déjà abordé la façon de rendre ce génial petit éditeur Open Source compatible avec les copier-coller de Word. …

Ce billet ayant suscité quelques questions, voici un petit tuto sur l’intégration toute simple de TinyMCE sur un site…

TinyMCE est un petit éditeur de texte open-source et sympathique à insérer dans un site, pour permettre aux utilisateurs de saisir du texte avec une mise en forme de type « traitement de texte ».
C’est plus complet qu’un simple champ de saisie multi-ligne « textarea », et il reste à mes yeux le plus simple à installer.
Il a toutefois un inconvénient pénible (outre le fait qu’il est en anglais !), c’est sa difficulté à permettre les copier-coller de textes pré-formatés issu d’un copier depuis Microsoft Word. Il existe pourtant une solution extrêmement simple pour résoudre ce problème…

c’est assez simple… et génialement pratique !

Javascript peut aider pour cette demande de raffraichissement automatique unique un peu particulière…

: pour ne pas enregistrer plusieurs fois les mêmes données dans une base, par exemple, si un utilisateur impatient clique plusieurs fois sur le bouton d’envoi du formulaire …

Lorsque l’on utilise certains liens Javascripts, la page se retrouve automatiquement scrollée vers le haut. Comment éviter cela ?

Comment le tester, parceque tous les pop-ups ne sont pas illégitimes…

Les feuilles de style CSS au choix du visiteur

… c’est souvent indispensable pour l’ergonomie de la navigation …