Mots-clé : jquery

Django / jQuery / Select2 / autocomplete

Voici un tutoriel sur quelque chose qui m’a pris plusieurs jours à réaliser « proprement » et encore, ça n’est pas si propre, mais c’est le mieux que je puisse faire actuellement, en termes de rapport « propreté / temps passé » raisonnable.

Voici l’idée : je veux qu’on puisse commencer à taper quelques lettres dans un champ, et que ce dernier aille demander en AJAX/JSON si jamais il y a des tags « connus ». Si c’est le cas, le retour renvoie une liste, qui s’ouvre, et l’utilisateur peut choisir dans cette liste en descendant avec les flèches. S’il n’y a aucun retour, l’utilisateur peut aller au bout, et envoyer son formulaire, et c’est là que la magie intervient : plus tard, s’il revient sur le formulaire, il pourra taper quelques lettres, et on lui proposera le champ en question ! Mieux ! Il peut séparer les champs par une virgule, et donc taper plusieurs choix. Exactement comme lorsqu’on commence à entrer le nom d’un destinataire sur gmail. La classe non ?

J’ai voulu faire cela pour plein de tags, mais le client pour lequel je faisais cela n’a pas réellement compris l’intérêt et m’a demandé de faire une liste de choix « fixes » que l’utilisateur peut cocher. Bref, no comment.

Donc voici comment j’ai procédé (je ne dis pas que c’est la meilleure façon, il y en a sûrement d’autres, mais vous pouvez vous en inspirer) :
– création d’un modèle Tag qui a la langue (selon les langues, pas le même Tag) :
– dériver un type de champ de base Django forms.TypedChoiceField afin de permettre une liste de choix, mais qui sera valide de deux manières : il faut surcharger les méthodes qui convertissent les valeurs de retour de ce champ, afin :
    – soit d’essayer de lire une liste d’entiers, séparés par des virgules, qui sont les ids des champs,
    – soit pour chaque champ qui ne peut pas être converti en entier, appeler une méthode « custom_tag« , qui va ajouter le tag en base de données puis renvoyer un entier = pk du tag ajouté
– créer un Widget custom dans lequel on passera une classe spéciale destinée au JavaScript qui recherchera cette classe
– en JavaScript (mon ami de toujours, qui fait que je passe 20% du temps sur Django à m’amuser et 80% du temps sur l’habillage Web à rager et/ou bidouiller), faire une routine qui va chercher les widgets définis au-dessus et y appliquer le select2 tel que défini dans la documentation
– faire une vue destinée de recherche qui prend un paramètre, et renvoie les résultats trouvés, c’est pour remplir les demandes d’AJAX de select2. Elle doit renvoyer un tableau « résultat » et une variable « total » qui est simplement le « length » de « résultat ».

C’est tout… enfin tout… on se comprend !

Mais en pratique, une fois que tout est mis en place, il suffit de déclarer dans n’importe quel formulaire un champ ainsi, et on aura un champ entièrement dynamique, qui s’auto-alimentera avec le temps. Extrêmement pratique :


    a = _("Emails:")
    emails = TagTypedChoiceField(
        label=a, required=False,
        custom_tag=add_tag_to_languages,
        widget=Select2Widget(attrs={
            'title': a,
            'placeholder': _("type an email"),
            'multiple': 'multiple',
            'data-select2-json': reverse_lazy(
                'co_branding_json_tags_emails',
                kwargs={'company': 'ubisoft'}),
            'class': 'form-control form-control select2'}),
        error_messages=e,
        choices=self.get_list_tags(Tag.TYPE_EMAIL))

IUT : jQuery / jQuery Mobile

Sujet

Ce que vous voulez tant que c’est dans le cadre de ce que l’on a vu. Vous avez tout le Web comme inspiration !
N’oubliez pas de me donner le nom et le mot de passe pour se connecter !

Voici les fonctionnalités obligatoires :

  • Connexion + déconnexion (vu en cours)
  • Effets jQuery sur les éléments
  • Appels JSON : au moins deux appels en plus de ceux vus en cours

Sujet imposé si vous n’avez pas d’idée

Cocktails : on se connecte, on a une liste d’éléments (récupérés en JSON) disponibles, on coche ceux qui nous intéressent, on valide, c’est envoyé, et le retour en JSON affiche les cocktails qu’il est possible de faire avec ce que l’on a coché.

Ce que vous devez me rendre

  1. Sur 4 points : le site HTML (bootstrap / design) et le code source du site HTML (HTML5, indentation)
  2. Sur 10 points : les appels AJAX, ainsi que des effets avec jQuery + de la construction dynamique d’éléments avec jQuery (indentation jQuery / JavaScript)
  3. Sur 6 points : le site HTML mobile avec du jQuery Mobile et des appels AJAX (indentation).

Pour favoriser votre organisation

  • Créez un dossier « SiteWeb » : vos pages HTML classiques, et votre code JavaScript
  • Créez un dossier « SiteMobile » : vos pages HTML pour jQuery Mobile, et votre code JavaScript pour jQuery Mobile
  • Créez un dossier « json » : tout votre code « serveur » (en Php sûrement), qui renvoie les pages au format JSON que les deux sites précedents appelleront. C’est la « référence » à n’écrire qu’une fois (copiez-collez ce dossier dans les deux dossiers précédents lorsque vous modifiez le code serveur (sous Linux, pas la peine, faites juste un lien symbolique (si vous voulez plus d’informations contactez moi)))

Librairies autorisées

Interdiction d’utiliser une librairie JavaScript qui ne vienne pas des sites autorisés précédemment

Dernier délai

Dimanche 2 avril à minuit

Fin de semaine de notre dernier cours, soit dimanche à minuit. Passé ce délai ce sera 1 pt par 2 heures de retard (je prendrai en compte la date de réception du mail).
Pour ceux qui essaient vraiment d’aller jusqu’à la dernière minute, toute heure entamée est comptée comme une heure complète. Exemple : un point en moins si je le reçois le lundi 3 avril à 00:01.
N’oubliez pas de me donner le nom et le mot de passe pour se connecter !

Rendu du TP

Vous ne m’envoyez que le code HTML et JavaScript, et un lien vers un site sur lequel vous avez tout réalisé. Ainsi, je n’aurais pas à installer / regarder ce qui a été fait en Php (ou Django/Python pour ceux qui veulent essayer les nouvelles technologies).

Avertissements

  • Copie sur une autre personne (« je se savais pas comment implémenter telle ou telle fonctionnalité dont j’avais besoin pour aller plus loin, je l’ai copiée sur un autre »), deux cas se distinguent :
    • si la personne est clairement nommée, cette fonctionnalité ne sera pas prise en compte dans la notation (= 0 pour cette fonctionnalité) ;
    • si la personne est clairement nommée, et qu’il y a une amélioration de la fonctionnalité : note pour la fonctionnalité divisée par 2 (uniquement la moitié du travail a été faite) ;
    • 0 aux deux personnes sinon ;
  • Si je m’aperçois que vous avez bêtement copié collé des sources Internet, je vous convoquerai pour vous demander de m’expliquer la fonctionnalité, et deux cas se distinguent :
    • si vous ne savez pas m’expliquer le code alors 0 ;
    • si vous savez m’expliquer tout le code alors votre note totale sera divisée par vous + le nombre de contributeurs à ce projet, ce qui se rapprochera certainement de 0 aussi.

Javascript et jQuery : comment créer un svg dynamiquement

Saviez vous qu’il était impossible de créer un élément svg dynamiquement comme ceci :

var $('<svg />'); ?

Moi non. Après avoir cherché pendant pas mal de temps j’ai enfin réussi à faire un code qui génère un svg et ça fonctionne :

var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
    div_svg = $('#mondiv');

mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute('viewBox', '0 0 100 100');
mySvg.setAttribute('preserveAspectRatio', 'xMinYMin');
div_svg[0].appendChild(mySvg); /* (!) [0] = élément DOM "pur" */
var c = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
c.setAttribute('points', '0,45 25,1 75,1 99,45 75,90 25,90');
c.setAttribute('style', 'fill:blue;stroke:red;stroke-width:1');
$(mySvg).append(c);

Et voilà vous avez enfin un exemple qui fonctionne !

IUT : TP jQuery / jQuery Mobile

La note sera décomposée ainsi :

(1) Sur 4 points – Le site HTML (bootstrap / design) et le code source du site HTML (HTML5, indentation + sortie à l’imprimante correcte)
(2) Sur 10 points : Les appels AJAX, ainsi que des effets avec jQuery + de la construction dynamique d’éléments avec jQuery (indentation Php et jQuery / JavaScript + sortie à l’imprimante correcte)
(3) Sur 6 points : le site HTML mobile avec du jQuery Mobile et des appels AJAX (indentation + sortie à l’imprimante correcte, sachant que, encore une fois, j’en attends moins du site mobile que du site principal).

Prenez en compte ces avertissements :
– interdiction d’utiliser une librairie JavaScript qui ne vienne pas des sites officiels jQuery, jQueryUI, jQuery Mobile ou Bootstrap
– dernier délai : fin de semaine de notre dernier cours, soit dimanche à minuit. Passé ce délai ce sera 1 pt par 2 heures de retard (je prendrai en compte la date de réception du mail) ;
– copie sur une autre personne (« je se savais pas comment implémenter telle ou telle fonctionnalité dont j’avais besoin pour aller plus loin, je l’ai copiée sur un autre »), deux cas se distinguent :
– si la personne est clairement nommée, cette fonctionnalité ne sera pas prise en compte dans la notation (= 0 pour cette fonctionnalité) ;
– si la personne est clairement nommée, et qu’il y a une amélioration de la fonctionnalité : note pour la fonctionnalité divisée par 2 (uniquement la moitié du travail a été faite) ;
– 0 aux deux personnes sinon ;
– si je m’aperçois que vous avez bêtement copié collé des sources Internet, je vous convoquerai pour vous demander de m’expliquer la fonctionnalité, et deux cas se distinguent :
– si vous ne savez pas m’expliquer le code alors 0 ;
– si vous savez m’expliquer tout le code alors votre note totale sera divisée par vous + le nombre de contributeurs à ce projet, ce qui se rapprochera certainement de 0 aussi.
– rendu du TP possible : vous ne m’envoyez que le code HTML et JavaScript, et un lien vers un site sur lequel vous avez tout réalisé. Ainsi, je n’aurais pas à installer / regarder ce qui a été fait en Php (ou Python pour ceux qui sont allés plus loin que les cours Php (oui, il y en a !)), et je regarderai ce que j’ai cité plus haut.

PacktLib jQuery for Designers Beginner’s Guide est sorti !

Le livre que j’ai revu – et critiqué est sorti :

PacktLib jQuery for designers

Avec mon petit CV de technical reviewer :

PacktLib jQuery for designers Olivier Pons

Olivier Pons is a developer who’s been building websites since 1997. He’s a teacher at IngeSup (École Supérieure d’Ingénierie Informatique; for more information visit http://www.ingesup.com/ and http://www.y-nov.com), at the University of Sciences (IUT) in Aix-en-Provence/France, and École d’Ingénieurs des Mines de Gardanne, where he teaches MVC fundamentals, Symfony, Php, HTML, CSS, jQuery/jQuery Mobile, Linux basics, and advanced VIM techniques. He has already done some technical reviews, including the books Ext JS 4 First Look, Packt Publishing and jQuery Mobile Web Delopment Essentials, Packt Publishing, among others. In 2013, he left a full-time job as a Delphi and PHP developer to concentrate on his own company, HQF Development (http://hqf.fr). He currently runs a number of websites, including http://www.livrepizzas.fr, http://www.papdevis.fr, and http://olivierpons.fr, his own web development blog. He works as a consultant, teacher, project manager, and sometimes a developer.

Google Maps API

Tutoriel :

https://developers.google.com/maps/documentation/javascript/tutorial?hl=FR

Fichier JSON qu’il faut créer :

{
  pos: {
    "lat": 0.123123,
    "lng": 0.5934257
  },
  "titre": "Titre Ma maison",
  "contenu": "Maison de chez mes parents etc etc"
}

Exemple de début de code Javascript qui charge le document :


$.getJSON("maison.json")
.done(function (data) {
    /* Code qui crée une google map dans un div */
})
.error(function(obj) {
    alert('Erreur, regardez la console');
    console.log(obj);
});

Dans l’idéal, voici ce qu’il faudrait faire pour le ready() :

$(document).ready(function() {
    /* fonction qui lance le chargement du fichier JSON,
     * et le met dans le div concerné
     */
    ajaxChargeGoogleMaps(
        "maison_parents.json",
        "#id-map1"
    );
    ajaxChargeGoogleMaps(
        "maison_personnelle.json",
        "#id-map2"
    );
});

jQuery et la ré organisation de div / cartes

Si jamais vous voulez faire plein de petits « cartes », ou « article », voire des photos, et que vous vouliez qu’ils soient automatiquement réorganisés, voici ce qu’il vous faut :

Ce plugin en JavaScript pour jQuery est absolument génial : http://masonry.desandro.com/. Essayez de redimensionner les fenêtres et vous verrez comment tout ça est réorganisé.

Css inutilisé : comment supprimer toute information inutile – how to

Si jamais vous avez un site qui utilise plein d’outils et que vous pensez que beaucoup de votre CSS n’est pas utilisé, alors allez jeter un coup d’oeil ici : http://unused-css.com/.

C’est un site qui aide pour dire quels sont tous les styles CSS déclarés, et lesquels ne sont pas utilisés.
Extrêmement pratique.

Notez tout de même que si jamais vous construisez dynamiquement des objets DOM (notamment en jQuery) qui utilisent un CSS particulier, et que ce dernier n’est pas utilisé ailleurs, alors je pense que ça trompe le vérificateur et qu’il pense que ce CSS n’est jamais utilisé.

Php, AJAX et problèmes de cache sur iOS : comment les résoudre

J’ai expliqué qu’il fallait mettre, avant de faire le tout dernier ordre de sortie echo json_encode($resultat_final); les headers JSON.

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

On m’a demandé à quoi servaient les entête de cache. J’ai expliqué que ça servait à s’assurer que les interrogations AJAX se feraient toujours (notez le futur), c’est à dire à demander au navigateur de ne rien garder en cache.

Comme toujours, ma mémoire me fait défaut mais mon expérience reste, et je savais qu’il faut éviter tout risque de problème cache.
J’ai retrouvé une explication concrète du problème : certaines versions du navigateur Safari sur iOS6 ne réinterrogent pas les appels AJAX.

Il suffit donc de faire deux choses :

  • Soit modifier la configuration Apache (c’est pour ça que j’ai consacré quelques heures sur les hôtes virtuels et leur configuration) pour qu’il y ait ces entêtes par défaut :
    Header set Cache-Control "no-cache"
  • Soit faire ma solution directement en Php (mais ça implique de le faire dans tous les retours AJAX – ce qui ne gêne en rien pour les petits projets)
  • Soit préciser en JavaScript de modifier le header :
    $.ajaxSetup({
        type: 'POST',
        headers: { "cache-control": "no-cache" }
    });

Toutes les solutions sont prises via le site de questions/réponses de reférence : en Anglais ici.