Une histoire de guillemet...
Le javascript c’est excellent, mangez en beaucoup, c’est bon pour les méninges ! Quelquefois cependant, ça arrive même aux plus avertis, une erreur se glisse dans un script... Alors je ne sais pas vous, mais voilà mes erreurs les plus courantes : 3 - un point virgule manquant 2 - une parenthèse ou une accolade en trop ou mal fermée 1 - UNE HISTOIRE DE GUILLEMET (ou d’apostrophe, ne chipotons pas) Les deux premières ne sont pas très graves, ce sont des erreurs d’inattention ; quand on sait que javascript ne laisse rien passer, on prend un bon café avant de coder et on écrit correctement. La dernière est plus embêtante et se pose systématiquement quand on passe une chaîne de caractères en paramètre. Un exemple simple (.Net MVC 3), je veux, pourquoi pas, afficher un texte dans une div au click sur un bouton. (l'espace de on click m'est imposé par l'éditeur)
<script>
function Coco(message) {
document.getElementById("laDiv").innerHTML = message;
}
</script>
@{string message = "Salut les gars.";}
<input type="button" on click="Coco('@message');"value="Coco?" />
<div id="laDiv"></div>
Super, ça marche. Maintenant il se trouve que dans mon message, il y a une apostrophe...
@{string message = "Salut les gars, javascript c'est trop bien.";}
<input type="button" on click="Coco('@message');"value="Coco?" />
Le truc bête, l'apostrophe du "c'est" s'embrouille avec celles qui entoure @message. Coté client, c'est la cata. Ne dites pas au développeur "ça plante quand on met une apostrophe", sinon il revient avec ça :
on click='Coco("@message");'
et deux jours après ça plante avec un guillemet :
@{string message = "Salut les gars, \"javascript\" c'est trop bien.";}
<input type="button" on click='Coco("@message");'value="Coco?" />
Il y a une solution très simple qui permet d'oublier définitivement ce problème stupide, c'est simplement d'encoder ses variables lorsqu'il s'agit de chaines de caractères... Dans notre exemple il faut écrire :
on click="Coco('@Html.Encode(message)');"
La solution marche tant que le texte est utilisé pour du html. Si la méthode Coco fait un alert avec le message par exemple, ça ne marche pas, car il n'existe rien de natif en javascript pour décoder en html. Il faudra alors faire un petit tour de magie avec jquery du genre :
function Coco(message) {
var decoded = $("<div/>").html(message).text();
alert(decoded);
}
Voilà, c'est bête comme tout mais ça fait du bien !