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"
);
});
Si vous ne connaissez pas ExtJs, c’est « à peine » du JavaScript, « à peine » utilisé par IBM, et plein d’autres « petites » entreprises 😉 .
Très puissant mais il manque parfois d’exemple.
En voici un pratique que j’ai eu du mal à mettre en place : pourtant c’est du classique de chez classique.
Je veux ouvrir un onglet qui charge automatiquement des informations de base de données : un onglet dans lequel il y a les informations d’un dossier : nom, prénom, date de naissance, etc.
Assez classique.
Mais disons… que je veux en faire le moins possible. Avec ExtJs, c’est très simple. Enfin simple… après avoir bien cherché !
En fait, l’astuce est qu’il faut appeler la fonction autoLoad, pour que le chargement soit automatique, et avant même d’afficher l’onglet.
Dans mon cas, je voulais afficher Homme ou Femme dans un combo. Donc il fallait avant même d’afficher l’onglet, qu’il précharge le truc dans un magasin de données = store.
Voici un exemple à suivre : tout un livre écrit par la communauté, donc tout un chacun – et ce pourraît même être vous – qui explique de manière très compréhensible, le HTML5.
Si jamais un jour, comme moi, vous essayez de mettre du code JavaScript directement à l’intérieur de votre article – ou de votre page – alors irez dans l’onglet à droite ainsi :
Et vous taperez sûrement quelques lignes basiques comme celles-ci :
<script>
alert('bonjour');
</script>
Cela ne fonctionnera pas !
J’ai posé la question ici, et la réponse était : le code généré dans la page n’est pas correct, il faut le corriger… ce qui est vrai ! La seule solution que j’aie trouvé : écrire un fichier JavaScript externe, et l’embarquer dans la page. Malheureusement, j’ai codé la chose en dur, et je cherche actuellement parmi ces possibilités :
Soit pouvoir écrire du code qui ne sera pas retravaillé dans les articles / et / ou / pages ;
Soit pouvoir inclure des fichiers uniquement en fonction des pages.
Ce que je n’ai pas fait. Mais ma solution fonctionne, même si elle n’est pas la meilleure.
Solution 1
Je suis allé dans mon thème, et j’ai fait un include « générique » dans et j’y ai rajouté l’inclusion de mon script :
Et là, j’ai pu écrire mon script, entièrement en JavaScript, qui n’est pas modifié par WordPress.
Pour information, ce script crée un formulaire complet afin de générer une requête SQL pour créer une base de données SQL avec un utilisateur et un mot de passe afin de copier coller le code pour créer la totale. Cela est si souvent fait que ça m’a lassé un peu et j’ai écrit ce code.
Vous pouvez retrouver ce formulaire dans cet article et dans cette page.
Solution 2
Les shortcode. Vous écrivez une function Php qui renvoie une chaine qui ne sera pas modifiée. Donc cette chaine peut tout à fait être du code dans une balise Javascript : <script>alert('bonjour');</script>. Seul problème : elle doit être codée en dur.
J’ai essayé de le contourner pour rendre le code entièrement dynamique.
Essayez ce code dans le fichier functions.php de votre thème :
Puis essayez d’appeler la fonction ainsi dans un article :
[f oobar script="<script>
jQuery(document).ready(function() {
var j=jQuery('<div />');
});
</script>"]
Et vous verrez que malgré tout, les paramètres sont retravaillés par WordPress et malmenés !
Au final, deux solutions
Ecrire un fichier JS externe, et l’inclure soit de manière générique dans toutes les pages, soit de manière dynamique (à vous de le paramétrer) :
La seconde qui consiste à écrire un shortcode et que ce shortcode renvoie le code Javascript au complet, sachant que le gros inconvénient, c’est que le code que vous renverrez sera difficilement lisible : en effet, ce sera une chaine de caractères « simple » dans votre fichier Php, il n’y aura aucune coloration syntaxique.
Le principe est d’utiliser une fonction d’opération sur les bits.
Comme JavaScript ne peut que faire une opération sur des entiers, il est « forcé » de convertir ce qui n’est pas un entier en entier.
Donc :
"6874654" | 0
forcera JavaScript à convertir les deux opérandes en entier. Dans la réalité c’est carrément des entiers sur 32 bits, donc ce principe ne peut pas s’appliquer à des chiffres supérieurs à (2^32)-1.
Par contre, si, comme moi, vous n’avez que des petits chiffres à convertir, surtout n’hésitez pas, c’est la méthode la plus rapide.
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é.
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é.