Problème ajax sur IE

Sujet résolu

21 avril 2010 à 23:05:34

Bonsoir,
J'ai implémenté un petit script d'ajax qui affiche des questions ainsi que leur réponse dans un div avec un effet slide (Lorsqu'on clique sur la question, le div avec la réponse s'affiche) et vis versa.

Maintenant, le problème c'est que ça fonctionne bien sur Firefox, Chrome mais pas sur IE où il marque des erreurs.

Voici le code :

<script type="text/javascript">
<!--
function ShowDiv (id) {
	
	var id_show;
	
	//Si l'id correspond à un id existant
        if (id_show = document.getElementById(id))
		{
			// Inverse l'état du div : s'il est à "display : none", sa largeur id_show.offsetWidth = 0
			var showHide = id_show.offsetWidth > 0 ? 'none' : 'block';
			id_show.style.display = showHide;
		}

}
-->

function charge_page(id) {  

  var xhr = null;

	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr = false;
	}
	//Ajout d un attribut
	xhr.change=false;
   
   xhr.open('GET', './contenu.php?id='+id, true);
   xhr.send(null);
   
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200)
         document.getElementById(''+id).innerHTML = xhr.responseText;
       else 
         alert ("Erreur : " + xhr.status);
     }
   }

   parent.location.hash = page; // Modification de l'url.
}

window.onload = function() {         // Ce qu'il y a à exécuter lors du chargement de la page (récuperer le hash).
   var hash = parent.location.hash;       // on mets le hash dans une variable
   
   if (hash != "") {                   // on verifie qu'il n'est pas vide et on agit en conséquence.
      charge_page(hash.substring(1));    // on évite de prendre en compte le croisillon, et on charge le contenu. Fini !
   } else {
      charge_page("accueil");            // la page d'accueil est chargée par défaut.
   }
};

</script>

Concernant l'appelle du script :

<?php
					
						$result = Aide::getAll();
						$i = 1;
						// Pour chaque réponse on définit un texteventx
						foreach($result as $a){
					
					
						$div = $a->get_id() ;
						$question = $a->get_question();
						$reponse = $a->get_reponse();
						
					?>

					<p class="inverse_aff" onclick = "ShowDiv('<?php echo $div; ?>')">
						<a href="javascript:charge_page('<?php echo $div; ?>')"><?php echo  $i. '/ ' .$question     ;?></a>
					</p>
					
					<div  class="inverse_af" id = "<?php  echo $div; ?>" >
					<p id="contenu<?php  echo $div  ; ?>"></p>

Quelqu'un peut-il m'aider à repérer l'erreur SVP, sachant que je suis encore débutant à l'ajax (C'est mon premier essai dans l'ajax d'ailleurs :p) ?

Merci d'avance.

Tillertan

21 avril 2010 à 23:13:27

xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       alert(xhr.responseText);
     }
   };

Si tu mets ça, ça alert quelque chose sous ie ou pas ?

JeuneInformaticien

21 avril 2010 à 23:24:06

Non, aucune alerte.
Pour l'erreur, il m'indique "Objet attendu" il me semble.

Tillertan

21 avril 2010 à 23:26:47

Tu sais, avec l'erreur t'as un numero de ligne, c'est très très utile en général.

JeuneInformaticien

21 avril 2010 à 23:34:57

Au départ, quand je lance la page pour la première fois, il me marque "Erreur de syntaxe", ligne 29 (Il commence à compter du script ou bien comme en PHP, dès le début du code ? :euh:

) et caractère 3.

Après quand je clique sur une question pour afficher la réponse (le div), il me marque une erreur "Objet attendu" ligne 1, caractère 1.

Le code total de la page aide.php au cas où ça peut aider.

<?php
	include('session.php');
	include('../classes/aide.inc.php');
?>

<!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=iso-8859-1" />
<title>Administration</title>
<link rel="stylesheet" type="text/css" href="../styles/admin.css"/>

<!--[if lte IE 8]> 
		<script type="text/javascript" src="../includes/roundies.js"> 
		</script>
	  <![endif]-->

<script type="text/javascript">
<!--
function ShowDiv (id) {
	
	var id_show;
	
	//Si l'id correspond à un id existant
        if (id_show = document.getElementById(id))
		{
			// Inverse l'état du div : s'il est à "display : none", sa largeur id_show.offsetWidth = 0
			var showHide = id_show.offsetWidth > 0 ? 'none' : 'block';
			id_show.style.display = showHide;
		}

}
-->

function charge_page(id) {  

  var xhr = null;

	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr = false;
	}
	//Ajout d un attribut
	xhr.change=false;
   
   xhr.open('GET', './contenu.php?id='+id, true);
   xhr.send(null);
   
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200)
         document.getElementById(''+id).innerHTML = xhr.responseText;
       else 
         alert ("Erreur : " + xhr.status);
     }
   }

   parent.location.hash = page; // Modification de l'url.
}

window.onload = function() {         // Ce qu'il y a à exécuter lors du chargement de la page (récuperer le hash).
   var hash = parent.location.hash;       // on mets le hash dans une variable
   
   if (hash != "") {                   // on verifie qu'il n'est pas vide et on agit en conséquence.
      charge_page(hash.substring(1));    // on évite de prendre en compte le croisillon, et on charge le contenu. Fini !
   } else {
      charge_page("accueil");            // la page d'accueil est chargée par défaut.
   }
};

</script>

</head>

<body>

<!-- Entête : Bannière ProfWeb -->

<div class="header"></div>

<!-- Inclusion du menu déroulant horizontal -->

	<?php include('menu.php'); 
	?>
	
<!-- Corps de la page -->

	<div class="wrapper">
	
		<div class="cadre">
			<h1>Aide</h1>	
			<br/>

			<p class="inverse_aff" onclick = "ShowDiv('conteneur')">Afficher / masquer Tout</p>
				<div id = "conteneur">

					<?php
					
						$result = Aide::getAll();
						$i = 1;
						// Pour chaque réponse on définit un texteventx
						foreach($result as $a){
					
					
						$div = $a->get_id() ;
						$question = $a->get_question();
						$reponse = $a->get_reponse();
						
					?>

					<p class="inverse_aff" onclick = "ShowDiv('<?php echo $div; ?>')">
						<a href="javascript:charge_page('<?php echo $div; ?>')"><?php echo  $i. '/ ' .$question     ;?></a>
					</p>
					
					<div  class="inverse_af" id = "<?php  echo $div; ?>" >
					<p id="contenu<?php  echo $div  ; ?>"></p>
 				</div>
					<?php $i++; }  ?>
		</div>
		<script>DD_roundies.addRule('div.cadre', '50px');</script>	
	</div>
	
<!-- Pied de page (Copyright) -->

<?php
	include('copyright.php');
?>

</body>
</html>

Tillertan

21 avril 2010 à 23:47:32

Il te dit ligne 29 de quel fichier ?

Et fait CTRL + U, le php on s'en fou

C'est pas ton roundies qui fou la merde ?

JeuneInformaticien

21 avril 2010 à 23:55:18

Ligne 29 de aide.php, la page avec le code que j'ai posté au dessus.
Pour le CTRL + U, je n'ai pas compris, ça sert à quoi ? :euh:

Sinon, non j'ai enlevé le script des roundies et ça ne change rien (A part que le bloc devient carré et c'est normal

).

Je me demande surtout pourquoi c'est seulement sur IE le problème, c'est lié à la déclaration de l'objet xhr ?

Tillertan

22 avril 2010 à 11:57:03

T'aurais pas la page en ligne par hasard ?

JeuneInformaticien

22 avril 2010 à 13:06:44

Non, dommage, je travaille en local (C'est dans le cadre d'un CMS que je développe pour mon projet de fin d'étude), pas de page en ligne donc.

Je n'arrive pas à comprendre le problème, tout semble bien dans mon code pourtant.

Tillertan

22 avril 2010 à 13:41:42

Si tu vires le xhr.change, et que tu mets le xhr.onreadystatechange avant le xhr.open, ça change quelque chose ?

Mets des alerts dans ta fonction voir où ça plante.

Avec quel IE tu testes ?

JeuneInformaticien

22 avril 2010 à 14:04:42

ça ne change rien.

Y a bel et bien des alertes, mais le problème c'est que ça ne sort rien dès le départ, me marquant que le script attend un objet.

J'utilise IE8.
ça peut être un problème de mon navigateur ? paramétrage ou un truc du genre ?

Tillertan

22 avril 2010 à 14:31:24

Non.

1. Fait CTRL + U sur ta page pour afficher le code source, et colle le code source en intégralité ici.

2. Copie colle les erreurs exactes que donnent le débugger d'ie.

JeuneInformaticien

22 avril 2010 à 14:54:55

Sur IE CTRL + U ça ne marche pas (Mais ça marche sur Firefox).

Le code de la page c'est le même que j'ai posté 8 messages en haut.

J'ai enlevé les  qui entourent la fonction ShowDiv(C'était le source du problème il me semble) et ça a l'air de fonctionner (Je vois les contenu quand je clique sur la question et le div s'affiche).

Mais il me marque une nouvelle erreur, un peu en bas sur le script.

L'erreur :

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2)
Horodateur : Thu, 22 Apr 2010 11:47:17 UTC

Message : 'document.getElementById(...)' a la valeur Null ou n'est pas un objet.
Ligne : 56
Caractère : 10
Code : 0
URI : http://localhost/profWeb__OO/administration/aide.php

Donc à ce niveau là :

xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200)
         document.getElementById(''+id).innerHTML = xhr.responseText;
       else 
         alert ("Erreur : " + xhr.status);
     }
   }

ça ne bloque pas l'exécution du script, mais ça affiche l'erreur en haut sur IE.

Tillertan

22 avril 2010 à 15:16:01

bah c'est explicit, l'id que tu mets dans ton document.getElementById n'existe pas sur ta page =/

JeuneInformaticien

22 avril 2010 à 17:04:53

Pourtant y a l'affichage donc normalement les id que je passe existent bel et bien.

La moitié du problème a été résolue, l'affichage est bon, juste l'erreur qui est marqué en bas, celle du document.getElementById !!
Comment puisse savoir de quel id s'agit-il ?

Tillertan

22 avril 2010 à 17:06:26

alert(id); avant de faire le document.getElementById

JeuneInformaticien

22 avril 2010 à 17:31:25

C'est réglé !

J'ai enlevé le else qui ne sert à rien, vu qu'il essai de chercher un élément avec l'id "accueil" qui n'existe pas.

<?php 
else {
      charge_page("accueil");            // la page d'accueil est chargée par défaut.
   }
?>

Merci pour m'avoir donné de ton temps et de ta patience Tiller. C'est gentil !

A la prochaine.