11550 sujets

JavaScript, DOM et API Web HTML5

Bon, voilà ma situation très simple, mais qui commence à me donner envie d'envoyer valser mon PC.

Nous avons un fichier PHP de base très simple qui me génère un code HTML, assez simple lui aussi, je vous mets la partie qui nous intéresse :

<h1>Habitation</h1>
Nourriture disponible dans les entrep&ocirc;ts de la cit&eacute; : <span id='nourriture'>100</span> unit&eacute;(s) - Nourriture disponible dans ce b&acirc;timent : <span id='quantite'>237</span> unit&eacute;(s)<br />
<span id='regime_txt'>Votre population consomme assez pour augmenter.</span> - <span id='chgtregime' onclick='chg_regime(1)'>Changer le r&eacute;gime.</span><br />
Quantit&eacute; de nourriture n&eacute;cessaire par heure : <span id='conso'>5</span> unit&eacute;(s).<br />
<span id='etat'>Gain d&#39;habitants : 4 habitant(s) par heure.</span><br />
Dur&eacute;e en consommation maximale : <span id='duree_max'>47</span> heure(s).<br />
Dur&eacute;e en consommation minimale : <span id='duree_min'>2</span> heure(s) suppl&eacute;mentaire(s). <br />
Dur&eacute;e avant famine : <span id='famine'>49</span> heure(s). <br />
Maximum d&#39;habitants atteint dans : <span id='hab_max'>19</span> heure(s).<br />


Le texte est généré par un fichier php de langue qui ressemble à ça :
<?php
$lg_batiment=array(
'perte' => "Perte d&#39;habitants",
'stagne' => "Ni gain, ni perte d'habitants",
'gain' => "Gain d&#39;habitants",
'famine' => "Dur&eacute;e avant famine",
'conso_max' => "Dur&eacute;e en consommation maximale",
'conso_min' => "Dur&eacute;e en consommation minimale",
'max_hab' => "Maximum d&#39;habitants atteint dans",
'unite1' => "heure(s)",
'unite2' => "habitant(s) par heure",
'unite3' => "heure(s) suppl&eacute;mentaire(s)",
'unite4' => "unit&eacute;(s)",
'nourriture1' => "Nourriture disponible dans les entrep&ocirc;ts de la cit&eacute;",
'nourriture2' => "Nourriture disponible dans ce b&acirc;timent",
'regime1' => "Votre population consomme le strict n&eacute;cessaire.",
'regime2' => "Votre population consomme assez pour augmenter.",
'necessaire' => "Quantit&eacute; de nourriture n&eacute;cessaire par heure",
'regime3' => "Changer le r&eacute;gime.",
);
?>


Quand on clique sur "changer le régime", ça appelle une fonction ajax assez simple
function chg_regime(id)
{
	var xmlHttp=null;
	try
	{// Firefox, Opera 8.0+, Safari, IE7
		xmlHttp=new XMLHttpRequest();
	}
	catch(e)
	{// Old IE
		try
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e)
		{
			alert ("Votre navigateur ne supporte pas XMLHTTP, veuillez installer un navigateur plus récent (IE7+, FF2+, Opera 8+, Safari, Chrome)");
			return;  
		}
	}
	xmlHttp.onreadystatechange = function() 
	{
		if (xmlHttp.readyState == 4 && (xmlHttp.status == 200 || xmlHttp.status == 0))  //si le retour est là
		{
			var jayson = xmlHttp.responseText;  //on récupère le json du PHP
			jayson=JSON.parse(jayson); //et on le rend utilisable
			document.getElementById("regime_txt").innerHTML=jayson.txt1;
			document.getElementById("conso").innerHTML=jayson.txt2;
			document.getElementById("etat").innerHTML=jayson.txt3;
			document.getElementById("duree_max").innerHTML=jayson.duree1;
			document.getElementById("duree_min").innerHTML=jayson.duree2;
			document.getElementById("famine").innerHTML=jayson.duree3;
			document.getElementById("hab_max").innerHTML=jayson.duree4;
			document.getElementById('chgtregime').enabled = true; //on réactive le clic
		}
	}
	document.getElementById('chgtregime').disabled = true; //on désactive le clic
	var url="change.php?type=1&x="+id;
	xmlHttp.open("GET",url,false);
	xmlHttp.send(null);                  
}


Qui pour faire bref, appelle un fichier PHP qui fait des changements dans la table et renvoiet des informations. Ces informations sont modifiés dans le HTML par le javascript.

change.php fait des trucs chelous avec mes données et renvoie un JSON au javascript sous cette forme :
$arr = array(
		'txt1' => $lg_tmp,
		'txt2' => $aff['taux_conso'],
		'txt3' => $txt3,
		'duree1' => $aff['duree1'],
		'duree2' => $aff['duree2'],
		'duree3' => $aff['duree3'],
		'duree4' => $aff['duree4']
	);
	echo json_encode($arr);
    die();


A nouveau, toute une partie des informations sont textuelles et proviennent de mon fichier de langue.


Mais ça marche pas (sinon je serais pas entrain de vous exposer tout ça).
-> l'appel au javascript marche bien
-> l'appel à change.php marche bien
-> change.php renvoie une chaîne de ce type au js :
{"txt1":"Votre population consomme le strict nécessaire.","txt2":1,"txt3":"Ni gain, ni perte d'habitants.","duree1":0,"duree2":0,"duree3":237,"duree4":0}

ou de ce type :
{"txt1":"Votre population consomme assez pour augmenter.","txt2":5,"txt3":"Gain d'habitants : 4 habitant(s) par heure.","duree1":47,"duree2":2,"duree3":49,"duree4":19}

-> et le JSON.parse plante royalement...


Voilà le message de la console d'erreur d'opera :
[13/04/2027 18:58:00] JavaScript -  http://www.maerah.com/habitation.php
 
Unknown thread
Uncaught exception: SyntaxError: JSON.parse: Unable to parse value: &#65279;&#65279;&#65279;{"tx
Error thrown at line 47, column 3 in <anonymous function: xmlHttp.onreadystatechange>() in  http://www.maerah.com/javascript/js1.js:
 
    jayson=JSON.parse(jayson);



Je précise que tous mes fichiers sont en UTF-8. (ainsi que mon charset)
Modifié par Lothindil (11 Mar 2012 - 15:23)
C'est bon, j'ai trouvé le problème... Un éclair de génie d'un coup.

-> encodage ISO : ça plante
-> encodage ANSI + caractère accentué : ça plante sur les accents
-> encodage UTF-8 + caractère accentué : ça plante
-> encodage UTF-8 + htmlentities (&#...) : ça plante, JSON.parse marche pas.

Je me suis rendue compte que j'avais oublié une version :

Encodage ANSI + htmlentities (&#...)

Celle-ci marche sans difficulté.

Voilà, si quelqu'un d'autres croise le soucis ! Smiley langue