Un problème que je n'arrive pas à identifier

Carte de France et Ajax

Sujet résolu

30 juillet 2009 à 23:13:43

Bonjour,

Je bloque sur le problème suivant :

J'essaie de faire une carte de France où, lorsque l'utilisateur clique dessus, un carré noir apparaît à l'endroit précis du clic.

Pourtant, ce carré n'apparaît pas, alors que dans une précédente version (que je n'ai pas gardée ><) tout marchait parfaitement ! Pourtant je n'ai rien changé !

J'ai un autre problème : lorsque je veux ajouter un autre script "recuperer.php" où les points déjà apparus auparavant sont remis sur la carte, celui-ci ne s'exécute pas... J'ai beau chercher, je ne trouve pas la source de ce problème...

Pour vous guider, je vous poste le code :

index.html (faut que je mette toutes ces fonctions dans un fichier .js à part d'ailleurs

) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Carte de france interactive</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript">
		function addMouseChecker(imgId, inputId, valueToShow)
		{
			imgId = document.getElementById(imgId);
			inputId = document.getElementById(inputId);

			if (imgId.addEventListener)
			{
				imgId.addEventListener('click', function(e){checkMousePos(imgId, inputId, valueToShow, e);}, false);
			}
			else if (imgId.attachEvent)
			{
				imgId.attachEvent('onclick', function(e){checkMousePos(imgId, inputId, valueToShow, e);});
			}
		}
		
		function add_point(x,y)
		{
			var img = document.createElement("img");
			img.src = "lol.png";
			img.style.position = "absolute";
			img.style.left = x;
			img.style.top = y;
			document.body.appendChild(img);
		}
		
		function checkMousePos(imgId, inputId, valueToShow, e)
		{
			var pos = [];
			var script = document.createElement("script");
			
			pos['x'] = e.clientX;
			pos['y'] = e.clientY;
			pos['xy'] = pos['x'] +','+ pos['y'];
			
			inputId.value = pos[valueToShow];
			
			add_point(pos['x']-3,pos['y']-3);
			
			script.src = "inserer.php?xy="+pos['xy'];
			script.type = "text/javascript";
			document.body.appendChild(script);
		}
		</script>
	</head>
	<body>
		<p><img src="franceidf.png" id="id_carte"/></p>
		<p><input type="text" id="id_texte" readonly="on"/></p>
		<script type="text/javascript">addMouseChecker('id_carte', 'id_texte', 'xy');</script>
	</body>
</html>

inserer.php (dont le code marche parfaitement) :

<?php
header("Content-type: text/javascript");
$path="imgs.txt";
$fichier = fopen($path,'a');

fwrite($fichier,$_GET['xy'].'/');
fclose($fichier);

?>

recuperer.php (qui n'est apparemment jamais exécuté) :

<?php header("Content-type: text/javascript");

$chemin="imgs.txt";
if(file_exists($chemin))
{
	$content = file_get_contents($chemin);
	$array = explode('/',$content);
	foreach($array as $val)
	{
		list($x, $y) = explode(',',$val);
		?>add_point(<?php echo $x ?>-3,<?php echo $y ?>-3);<?php
	}
}
?>

Bon courage pour trouver les problèmes, je ne suis pas (du tout

) un expert mais je ne trouve vraiment pas d'erreur flagrante

Golmote

31 juillet 2009 à 1:01:24

Donne le HTML généré plutôt que le PHP stp. Plus pratique pour débugguer le JS.

-HD

31 juillet 2009 à 12:08:05

Problème résolu... Avec une nuit de sommeil, le problème m'est devenu légèrement plus clair : c'était une grosse faute de syntaxe :euh:

Avis à tous les programmeurs distraits : Quand on met src dans une balise <script></script>, ça plante

Utilisez <script /> !

Par contre, ce <script /> fait planter leslignes suivantes, je ne comprends vraiment pas :waw:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Carte de france interactive</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript">
		<!-- Différentes fonctions JavaScript qui ne plantent pas -->
		</script>
	</head>
	<body>
		<p><img src="franceidf.png" id="id_carte"/></p>
		<p><input type="text" id="id_texte" readonly="on"/></p>
                <script type="text/javascript" src="recuperer.php" />
		<script type="text/javascript">addMouseChecker('id_carte', 'id_texte', 'xy');</script>
	</body>
</html>

Etrange, la ligne 12 fait planter mon code, ce qui se voit sur la différence de coloration à la ligne suivante... Pire encore, lorsque je consulte le code source de ma page, toutes les lignes suivant la 12 sont "décolorées" ! J'avoue que je n'y comprends rien.

Golmote

31 juillet 2009 à 14:26:26

La balise <script> doit s'écrire ainsi :

<script type="text/javascript" src="fichier.js"></script>

Elle n'est pas autofermante !

-HD

31 juillet 2009 à 15:40:38

Et ben voilà, tout marche...

J'ai pourtant pas avoir l'impression d'avoir changé grand-chose... Mais bon, en tout cas, ça marche ! Merci