11545 sujets

JavaScript, DOM et API Web HTML5

Navigation Ajax sur plusieurs niveaux / Problème Internet explorer

Bonjour,

Débutant en javascript & cie, je me suis attelé à essayer de réaliser une sorte d'application questionnaire simple. Le but étant de poser différents questions pour aboutir à la solution. Bien évidemment en fonction de la réponse, la question suivante change.

En utilisant Jquery et Ajax et du temps je suis parvenu à un résultat. Le tout fonctionne parfaitement sur Opera, Firefox & Chrome mais ne fonctionne pas correctement sur Internet explorer.

Voilà un extrait:

fichier: ajax.js


$(document).ready(function(){   // permet de s'assurrer que la page est bien chargé
	$("#questionnaire a").click(function(){    // sélectionne tous les liens et définit une action quand on clique dessus
		page=$(this).attr("href"); // permet de récuperer l' adresse du lien
		$.ajax({  // ajax
			url: page, // url de la page à charger ( url: "contenu/"+page, )
			cache:false, // pas de mise en cache
			success:function(html){ // si la requête est un succès 
				afficher(html);   // on execute la fonction afficher(data)
			},
			error:function(XMLHttpRequest, textStatus, errorThrows){	// erreur durant la requete
				alert(textstatus);
			}
		});
		return false; // on desactive le lien
	});
});

function afficher(data){ // pour remplacer le contenu du div "questionnaire"
	$("#questionnaire").fadeOut(400,function(){	// On masque joliment ce qui est affiché
	$("#questionnaire").empty(); // on vide le div
	$("#questionnaire").append(data); // on remplit le div avec le résultat de la requête ajax
	$("#questionnaire").fadeIn(800);	// On affiche joliment avec les nouvelles données
})
}


fichier: index.html


<!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" lang="fr" >

	<head>
		<title>Titre</title> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" media="all" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery171.js"></script>
		<script type="text/javascript" src="ajax.js"></script>
	</head>
	
<body>

<div id="questionnaire">
<p class="question"><img src="images/question.png" alt="question"/>Question à poser ?</p>
			
<p class="aide">Texte d'aide si besoin</p>
 
<p class="center"><a class="bouton" href="guide/page0.html">oui</a><a class="bouton" href="guide/page17.html">non</a></p>
		
</div>

</body>
</html>


fichier: questionx.html


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

		<div id="retour">
			<a href="../boucle.html"><img src="images/fleche.png" alt="retour"/></a>
		</div>
		
		<p class="question"><img src="images/question.png" alt="question"/>La quetion qui est lié la précédente</p>
		
		<p class="aide">texte d'aide si nécessaire</p>
 
 		<p class="center"><a class="bouton" href="guide/page1.html">oui</a><a class="bouton" href="guide/page12.html">non</a></p>


Dans un autre navigateur que IE tout fonctionne parfaitement bien sans erreurs et sous IE, il me change dynamiquement le contenu un première fois de façon correcte puis cela ne fonctionne plus pour les suivantes.

Un idée de mon problème ? Merci.
Modifié par BanZaiii33 (16 Feb 2012 - 14:59)
Re,

J'ai trouvé un début de solution qui semble fonctionner avec internet explorer:

Depuis le début, j'appelais mon script placé dans un fichier externe avec:
<script type="text/javascript" src="ajax.js"></script>

en haut de mon document html à inclure ce qui fonctionnait bien avec les autres navigateurs.

Du coup pour que cela fonctionne sous IE, il faut que j'inclue le code en entier dans chaque pages...

Mais pourquoi ?
Sujet clos
Aller à