Sujet Précédent Sujet Suivant

Je n'arrive pas à afficher les données (ajax)

Fermé
Mac11 Messages postés 145 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 - 31 mai 2018 à 17:42
jordane45 Messages postés 38441 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 février 2025 - 31 mai 2018 à 21:10
Hello World !
Je n'arrive pas à afficher les données qui se trouvent dans un fichier xml. Le fichier xml est situé au même niveau que mon html. J'utilise jQuery et ajax pour mon petit programme. Ce qui me perturbe aussi, c'est que je n'ai aucun message d'erreur dans la console. Quelqu'un peut-il m'aider et me dire comment afficher ces données dans le fichier html. Merci
Voici les 2 script
html : 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Données</title>

		<link rel="stylesheet" href="style.css" />

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				function getXMLRacers(){
					$.ajax(
						{	
							url:'finishers.xml',
							cache:false,
							dataType:'xml',
							success:function(xml){
								$('#finishers_m').empty();
								$('#finishers_f').empty();
								$('#finishers_all').empty();
								$(xml).find('runner').each(function(){
									var info = '<li>Name: ' + $(this).find('fname').text() + '</li>' + ' ' + $(this).find('lname').text() + ' . Time: ' + $(this).find('time').text() + '</li>';
									if($(this).find('gender').text() == 'm'){
										$('#finishers_m').append(info);
									} else if ($(this).find('gender').text() == 'f') {
										$('#finishers_f').append(info);
									} else { 
										$('#finishers_all').append(info);
									}
								});
								getTime();
							},
						}
					);
				}
			});
		</script>
	</head>

	<body>
		<div id="main">
			<ul class="idTabs">
				<li><a href="#male">Male finishers</a></li>
				<li><a href="#female">Female Finishers</a></li>
				<li><a href="#all">All Finishers</a></li>
			</ul>
			<div id="male">
				<h4>Male Finishers</h4>
				<ul id="finishers_m"></ul>
			</div>
			<div id="female">
				<h4>Female Finishers</h4>
				<ul id="finishers_f"></ul>
			</div>
			<div id="all">
				<h4>All Finishers</h4>
				<ul id="finishers_all"></ul>
			</div>
		</div>
		<footer>
			<h4>Congratulations to all our finishers !</h4>
			<br />Last updated : <div id="updateTime"></div>
		</footer>
	</body>
</html>


xml : 
<?xml version="1.0" encoding="utf-8" ?>
<finishers>
	<runner>
		<fname>John</fname>
		<lname>Smith</lname>
		<gender>m</gender>
		<time>25:31</time>
	</runner>
	<runner>
		<fname>Jacob</fname>
		<lname>Walker</lname>
		<gender>m</gender>
		<time>25:54</time>
	</runner>	
	<runner>
		<fname>Mary</fname>
		<lname>Brown</lname>
		<gender>f</gender>
		<time>26:01</time>
	</runner>
	<runner>
		<fname>Jenny</fname>
		<lname>Pierce</lname>
		<gender>f</gender>
		<time>26:04</time>
	</runner>
	<runner>
		<fname>Franck</fname>
		<lname>Jones</lname>
		<gender>m</gender>
		<time>26:08</time>
	</runner>
	<runner>
		<fname>Bob</fname>
		<lname>Hope</lname>
		<gender>m</gender>
		<time>26:38</time>
	</runner>
</finishers>


Merci pour votre aide

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38441 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 février 2025 4 737
31 mai 2018 à 18:00
Bonjour,
Si, pour commencer, tu fais un console.log dans le "success" ? 
success:function(xml){
  console.log('La réponse :');
  console.log(xml);


Ajoute donc également le .error dans ton ajax 
error: function (jqXHR, exception) {
    console.log(jqXHR);
}

0
Mac11 Messages postés 145 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
31 mai 2018 à 19:09
Merci de me répondre
il me répond ceci :
Uncaught SyntaxError: Unexpected identifier => ligne 46
qui est celle-ci : } error: function (jqXHR, exception) {
0
jordane45 Messages postés 38441 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 février 2025 4 737
31 mai 2018 à 19:25
Il me faut le code complet
0
Réponse 2 / 2
Mac11 Messages postés 145 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
31 mai 2018 à 19:28 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Tête la Première</title>

		<link rel="stylesheet" href="style.css" />

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				function getXMLRacers(){
					$.ajax(
						{	
							url:'finishers.xml',
							cache:false,
							dataType:'xml',
							success:function(xml){
								console.log(xml);
								/*$('#finishers_m').empty();
								$('#finishers_f').empty();
								$('#finishers_all').empty();
								$(xml).find('runner').each(function(){
									var info = '<li>Name: ' + $(this).find('fname').text() + '</li>' + ' ' + $(this).find('lname').text() + ' . Time: ' + $(this).find('time').text() + '</li>';
									if($(this).find('gender').text() == 'm'){
										$('#finishers_m').append(info);
									} else if ($(this).find('gender').text() == 'f') {
										$('#finishers_f').append(info);
									} else { 
										$('#finishers_all').append(info);
									}
								});
								getTime();*/
							} error: function (jqXHR, exception) {
							    console.log(jqXHR);
							},
						}
					);
				}
			});
		</script>
	</head>

	<body>
		<div id="main">
			<ul class="idTabs">
				<li><a href="#male">Male finishers</a></li>
				<li><a href="#female">Female Finishers</a></li>
				<li><a href="#all">All Finishers</a></li>
			</ul>
			<div id="male">
				<h4>Male Finishers</h4>
				<ul id="finishers_m"></ul>
			</div>
			<div id="female">
				<h4>Female Finishers</h4>
				<ul id="finishers_f"></ul>
			</div>
			<div id="all">
				<h4>All Finishers</h4>
				<ul id="finishers_all"></ul>
			</div>
		</div>
		<footer>
			<h4>Congratulations to all our finishers !</h4>
			<br />Last updated : <div id="updateTime"></div>
		</footer>
	</body>
</html>
0
jordane45 Messages postés 38441 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 février 2025 4 737
31 mai 2018 à 21:10
Regarde donc sur internet comlent et où on doit ecrire le .error dans un ajax...
0

Discussions similaires

Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
Nettoyer une base de données avec une liste
TOT127 -
TOT127 -

11 réponses
Erreur la zone de données passée à un appel système est insu
Vincent -
Panth33ra -

5 réponses