Javascript + KML + JSON

Hewyn - 7 nov. 2012 à 11:09
 Hewyn - 7 nov. 2012 à 11:16
Bonjour,

Je suis étudiant en BTS et je dois réaliser un site internet en utilisant des fichiers OPENDATA. J'ai récupéré un fichier KML et JSON que j'ai utilisé avec bing maps pour faire afficher des icônes sur la map. Cela fonctionne bien.

En revanche, j'ai voulu récupérer les informations du JSON pour les afficher dans un tableau en utilisant WAMP. J'obtiens des problèmes de caractères mais mon tableau marche. Hors une fois mis en ligne sur un hébergeur mon tableau ne fonctionne plus du tout (la carte fonctionne bien donc le KML et le JSON sont chargés).

Voici des screenshots pour de plus claires détails.

http://img560.imageshack.us/img560/2928/24134846.jpg
http://img84.imageshack.us/img84/1339/jv2ys.jpg

Ici le site web : http://saone-et-loisirs.franceserv.fr/index.html

Comment corriger les problèmes de caractère et pourquoi mon tableau ne fonctionne pas un fois mis en ligne ?


Merci d'avance pour vos réponses.

1 réponse

Si besoin le code ici pour le tableau :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-51" />
<link href="style_accueil.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ch.renier.free.fr/opendata/jquery.js"></script>

<title>Liste Activités</title>

<script type="text/javascript" >

var url = "keke.json";

$.get(url,function(json){
var r = $(json.d);
r.each(function(i,data){
$('#nom').append('<td>'+i+'.'+'
'+data.nom+'</td>');
$('#adresse').append('<td>'+data.adresse1+'</td>');
$('#ville').append('<td>'+data.ville+'</td>');
$('#acti').append('<td>'+data.type_activite+'</td>');
$('#nomm').append('<option>'+data.ville); // Affiche dans les listes déroulantes
$('#actt').append('<option>'+data.type_activite); // '' '' '' ''
});
$('#nomm').change(function() {
var y = $('#nomm option:selected').text();
document.getElementById('nom').innerHTML=null;
document.getElementById('adresse').innerHTML=null;
document.getElementById('ville').innerHTML=null;
document.getElementById('acti').innerHTML=null;
r.each(function(i,data){
if(y == data.ville){
$('#nom').append('<td>'+i+'.'+'
'+data.nom+'</td>');
$('#adresse').append('<td>'+data.adresse1+'</td>');
//$('#ville').append('<td>'+data.ville+'</td>'); // Quand on trie par ville, on ne réaffiche pas la ville dans le tableau
$('#acti').append('<td>'+data.type_activite+'</td>');
}
});
});
$('#actt').change(function() {
var z = $('#actt option:selected').text();
document.getElementById('nom').innerHTML=null;
document.getElementById('adresse').innerHTML=null;
document.getElementById('ville').innerHTML=null;
document.getElementById('acti').innerHTML=null;
r.each(function(i,data){
if(z == data.type_activite){
$('#nom').append('<td>'+i+'.'+'
'+data.nom+'</td>');
$('#adresse').append('<td>'+data.adresse1+'</td>');
$('#ville').append('<td>'+data.ville+'</td>');
//$('#acti').append('<td>'+data.type_activite+'</td>'); // Quand on trie par activité, on ne réaffiche pas les activités dans le tableau
}
});
});
})
</script>
</head>


SAONE ET LOISIRS





<label> [index.html Accueil ]</label>


<label> [activites.html Liste Activités ]</label>


<label> [carte.html Carte ]</label>



<center>
Trier Par :



<form>
<label>Ville : </label>

<select name="ville" size="1" id="nomm">
</select>

<label>ou par</label>

<label>Type d'Activité : </label>

<select name="actt" size="1" id="actt" />
</select>
</form></center>





</html>



Merci !
0
Rejoignez-nous