Hello !
I need some help:
I try to load a XML database in a web page using jQuery (like say in subject).
My database look like :
<?xml version="1.0" encoding="UTF-8"?>
<villes>
<ville>
<idville>14</idville>
<nomville>Arles</nomville>
<site>http://ift.tt/1rkdSiP;
<patrimoine>
<fiche>http://ift.tt/1sUInRB;
<identifiant>445</identifiant>
<titre>Abbaye de Montmajour</titre>
<description>blabla</description>
<latitude>43.705856</latitude>
<longitude>4.664383</longitude>
<MOTS>
<themes>Religion</themes>
<categoriedelarchitecture>Architecture religieuse, funéraire et commémorative</categoriedelarchitecture>
<typedarchitecture>Architecture religieuse</typedarchitecture>
<appartenance>Monument historique classé</appartenance>
<epoque>Moyen-Age</epoque>
<stylearchitectural>Roman provençal</stylearchitectural>
<datation>XIIe siècle</datation>
<edifice>Bâtiment religieux</edifice>
<propriete>Etat</propriete>
</MOTS>
<images>
<image>http://ift.tt/1rkdSiT;
<image>http://ift.tt/1sUIk8m;
<image>http://ift.tt/1rkdUap;
<image>http://ift.tt/1sUIk8q;
</images>
</patrimoine>
<patrimoine>
...
</patrimoine>
<patrimoine>
...
</patrimoine>
</ville>
<ville>
...
</villes>
<ville>
...
</villes>
</villes>
This is just a sample of my database...
And here my HTML:
<!DocType html>
<html>
<head>
<meta http-equiv="content_type" content=text/html; charset="utf-8" />
<title>spip.php.xml - database</title>
<link rel="stylesheet" type="text/css" href="#.css" media="all" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<header>
</header>
<script>
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "spip.php.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('ville').each(
function()
{
var idville = $(this).find('idville');
var nomville= $(this).find('nomville').text();
var site= $(this).find('site').text();
$('<div class="items" id="'+idville+'"></div>').html('<a href="'+site+'">'+nomville+'</a>').appendTo('#Div_XML');
$(this).find('patrimoine').each(
function()
{
var fiche = $(this).find('fiche').text();
var identifiant = $(this).find('identifiant').text();
var titre = $(this).find('titre').text();
var description = $(this).find('description').text();
var latitude = $(this).find('latitude').text();
$('<div class="items"></div>').html('<a href="#">MOTS</a>').appendTo('Div_XML');
$(this).find('MOTS').each(
function()
{
var themes = $(this).find('themes').text();
var categoriedelarchitecture = $(this).find('categoriedelarchitecture').text();
var typedarchitecture = $(this).find('typedarchitecture').text();
var appartenance = $(this).find('appartenance').text();
var epoque = $(this).find('epoque').text();
var stylearchitectural = $(this).find('stylearchitectural').text();
var datation = $(this).find('datation').text();
var edifice = $(this).find('edifice').text();
var propriete = $(this).find('propriete').text();
$('<div class="items"></div>').html('<a href="#">MOTS</a>').appendTo('Div_XML');
});
$(this).find('images').each(
function()
{
var image = $(this).find('image').text();
$('<div class="items"></div>').html('<a href="#">MOTS</a>').appendTo('Div_XML');
});
});
});
});
});
</script>
<footer>
</footer>
</body>
I just followed this tutorial
Obvious, that don't work, why ?
And how can I create a condition to get only "Arles" city ?
Thank You !
No comments:
Post a Comment