2 pb en javascript: Ajax et compatibilité ie

Salut à tous,

J'ai deux problèmes, je les mets dans une seule discussion (ai-je raison...)

Problème numéro 1

Je n'arrive pas a faire marcher ce script JS sous FireFox (étonnant; il marche sous ie ...)
Il permet de supprimer une photo de la BDD et du fichier en cliquant sur l'image en question

modifier.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Modifiez votre album</title>
<script>
function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}
function Supprimer(id){
	var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente

	xhr.open("GET", "supprimer.php?id=" + id + "", true);
	xhr.send(null);
	window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
}
</script>
<link rel="stylesheet" href="style.css" style="text/css"/>
</head>
<body>

<div id="MenuH">
<?php echo MenuHaut(); ?> <!--importe le menu lateral gauche-->
</div>
<div id="MenuGauche">
<?php echo MenuGauche(); ?><!--importe le menu horizontal haut-->

</div>
<div id="Content">
<?php
	if(!isset($_GET['id'])){
		echo "Veuillez choisir un album &agrave; modifier sur la page pr&eacute;cedente!";
	}
	else if(isset($_GET['id'])){
		$id = $_GET['id'];
?>
	<form method="post" action="ajouter-image.php?id=<?php echo $_GET['id'];?>">
	<p>
       Choisissez une m&eacute;thode d'ajout :<br />
       <input type="radio" name="methode" value="zip" id="zip" /> <label for="zip">avec un fichier .zip <small><a href="aide.php#zip">Cr&eacute;er un fichier .zip</a></small></label><br />
       <input type="radio" name="methode" value="normal" id="normal" /> <label for="normal">photo par photo <small>(d&eacute;conseill&eacute; si plus de 10 photos)</small></label><br />
       <input type="submit" value="Suite" />
	</p>
	</form>
	
	
<?php
	}	
?>
<h3 style="text-align: right">Contenu de cet album</h3>
<p style="text-align: right">Cliquez sur une photo pour la retirer de l'album</p>
<?php	
	AfficherImages($id);

?>

</div>
</body>
</html>


supprimer.php

<?php
	require_once('moteur.php'); //ce fichier contient toutes les fonctions

	$id = $_GET['id'];
	$reponse = mysql_query("SELECT * FROM contenu_album WHERE id='$id'");
	while($donnees = mysql_fetch_array($reponse)){
		unlink($donnees['url']);
	}
	mysql_query("DELETE FROM contenu_album WHERE id='$id'");
?>


___________________________________________________________________________________________

Problème numéro 2

Je n'arrive pas à rendre ce script compatible avec ie, il me met une erreur d'objet (visiblement il n'arrive pas a trouver le champ du formulaire)

diapo.php

<script>

urlImage = new Array();


<?php
$id = $_GET['id'];
$reponse = mysql_query("SELECT * FROM contenu_album WHERE id_album = '$id'");
$i = 0;

while ($donnees = mysql_fetch_array($reponse)){
	echo '	i'.$i.' = new Image();
			i'.$i.'.src = "'.$donnees['url'].'";
			urlImage['.$i.'] = "'.$donnees['url'].'";
			';
	$i++;
}

?>

i = 0;

function calculSecondes(){
	form = document.getElementById("form");
	secondes = 	form.secondes.value * 1000;
	Lecteur('play');
	document.getElementById('secondes').value = "Modif.";
}
function Lecteur(methode){
	
	if(methode == "play"){
		if(i < urlImage.length){
			document.getElementById("info").innerHTML = i;
	
			document.getElementById("output").src = urlImage[i];
			i++;
			retardateur = window.setTimeout("Lecteur('play')", secondes);
		}
	
		else {
			clearTimeout(retardateur);
			i = 0;
			
			retardateur = window.setTimeout("Lecteur('play')", secondes);
		}
		
	}
	else if(methode == "pause"){
		i--;
		clearTimeout(retardateur);
		if(i < urlImage.length){
			document.getElementById("info").innerHTML = i;
			document.getElementById("output").src = urlImage[i];	
		}
		else if(i > urlImage.lenth){
			i = 0;
			Lecteur("pause");
			//window.setTimeout("Suivante()", 3000);
		}
	}
	else if(methode == "precedente"){
		i = i-2;
		clearTimeout(retardateur);
					
		if (i<0){
			i = 0;
		}
		else{
			document.getElementById("output").src = urlImage[i];
			document.getElementById("info").innerHTML = i;
		}
		
	}	
	
	else if(methode = "suivante"){
		clearTimeout(retardateur);
		if(i < urlImage.length){
			document.getElementById("info").innerHTML = i;
			document.getElementById("output").src = urlImage[i];
			i++;
		}
		else{
			i = 0;
			Lecteur("suivante");
		}
	}

	
	
}

function Precedente(){
	i--;
	i--;
	if (i<0){
		i = 0;
	}
	else{
		document.getElementById("output").src = urlImage[i];
		document.getElementById("info").innerHTML = i;
	}
	
}
</script>
<link rel="stylesheet" href="style.css" style="text/css"/>
</head>
<body>

<div id="MenuH">
<?php echo MenuHaut(); ?>
</div>
<div id="MenuGauche">
<?php echo MenuGauche(); ?>

</div>
<form id="form" name="form">
<p>D&eacute;lais entre les images: 	<select name="secondes" id="secondes">
										<option value="2">2 secondes</option>
										<option value="3">3 secondes</option>
										<option value="4">4 secondes</option>
										<option value="5">5 secondes</option>
										<option value="6">6 secondes</option>
										<option value="7">7 secondes</option>
										<option value="8">8 secondes</option>
										<option value="9">9 secondes</option>
										<option value="10">10 secondes</option>
										<option value="15">15 secondes</option>
									</select><input type="button" value="Lancer" id="lancer" onclick="calculSecondes()" /></p>
</form>
<div id="Content">
<input type="button" value="<<" onclick="Lecteur('precedente')" /><input type="button" value="Play." onclick="Lecteur('play')" /><input type="button" value="Pau." onclick="Lecteur('pause')" /><input type="button" value=">>" onclick="Lecteur('suivante')" />
<div id="info"></div>
<img src="" id="output">
</div>



Merci beaucoup pour vos réponses!
--
"J'ai toujours besoin d'aide, donc j'aide toujours les autres" Pensez-y!
Configuration: Fujitsu Siemens - Intel Core 2 quad Q8200

14 réponses

  1. Salut,

    Merci pour ton aide :p

    Voici le code pour info:

    function getXMLHttpRequest() {
    	var xhr = null;
    	
    	if (window.XMLHttpRequest || window.ActiveXObject) {
    		if (window.ActiveXObject) {
    			try {
    				xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch(e) {
    				xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    		} else {
    			xhr = new XMLHttpRequest(); 
    		}
    	} else {
    		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    		return null;
    	}
    	
    	return xhr;
    }
    function Afficher(id){
    	var xhr = getXMLHttpRequest();
    
    	xhr.open("GET", "afficher.php?id=" + id  + "", false);
    
    	xhr.send(null);
    
    	document.getElementById('album').innerHTML = xhr.responseText;
    
    	
    }
    	
    function Supprimer(id){
    	var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
    
    	xhr.open("GET", "supprimer.php?id=" + id + "", true);
    	xhr.send(null);
    	
    	Afficher(<?php echo $_GET['id']; ?>);
    
    	//window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
    }
    


    A+
    1. avec Ajax tu peux utiliser la partie
      xhr.onreadystatechange = function() { traitementReponse(xhr); } //affectation fonction appelée qd on recevra la reponse

      mets la ainsi:

      function Supprimer(id){
      	var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
        xhr.onreadystatechange = function() { traitementReponse(xhr); } //affectation fonction appelée qd on recevra la reponse
      	xhr.open("GET", "supprimer.php?id=" + id + "", true);
      	xhr.send(null);
      	window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
      }
      
      


      ensuite tu cree une fonction js
      function traitementReponse(xhr){
      var affich="";
      	if (xhr.readyState == 4) {
      		if (xhr == 200) {
      					// cas avec reponse de PHP en mode texte:
      			
      			var reponse=xhr.responseText; //c'est la réponse du script php
      			alert(reponse); //TEST
                          //ecrire la réponse dans la apge
                      obj=document.getElementById('id_ecrire');
                      obj.innerHTML=reponse;
      				
      		} 
      		else {
                      alert('Un problème est survenu avec la requête.');
              }
          }
      
      }
      


      ton script php reçoit l'élément a supprimer, il le supprime, il fait une nouvelle requette a ta base et par un echo renvoie la liste

      quand Ajax reçoit la réponse, elle est ecrite dans la page dans le <div id="id_ecrire"> </div>
      1. Bah ouais, mais je sais pas trop comment faire pour eviter de recharger la page :s
        On peut, c'est vrai, afficher le contenu d'un fichier php, mais pour l'afficher en temps réel, je vois pas...
        1. ha si j'ai vu, quand tu as les boites d'alert ça amèneune temporisation entre chaque "phase"
          donc tu dois avoir un pb de syncro dans ton script.



          function Supprimer(id){
          var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente

          xhr.open("GET", "supprimer.php?id=" + id + "", true);
          xhr.send(null);
          window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
          }



          pourquoi as tu mis windows.location..... ??

          AJAX te permet d'appeler un script php sans recharger la page et toi du fais recharger la page modif.php

          donc supprimes cette ligne
          1. la je ne comprend plus si c'est le mêm script où est le problème ?

            par contre mets
            <script type="text/javascript">
            1. Celui qui ne fonctionne pas, c'est le même que celui qui fonctionne sauf qu'il n'y a pas les
              alert

              1. ooui mais ça c'est les alert du script qui fonctionne, fais la même chose avec celui qui ne fonctionne pas
                1. Il affiche: 6-1-2-3-4-5-7-8-9

                  (C'est normal qu'il affiche 6 en premier vue que je l'ai mis juste sous la déclaration de la fonction)
                  1. je vois que tu as mis plein d'alert alors ce sont lesquelles qui s'affichent ?
                    1. Salut!

                      Ce code fonctionne,
                      <script>
                      function getXMLHttpRequest() {
                      	alert('1');
                      	var xhr = false;
                      	
                      		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
                              if (window.XMLHttpRequest) { // Mozilla, Safari,...
                      			alert('2');
                                  xhr = new XMLHttpRequest();
                                  if (xhr.overrideMimeType) {
                      				alert('3');
                                      xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
                                  }
                              } else if (window.ActiveXObject) { // IE
                                  try {
                      				alert('4');
                                      xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                  } catch (e) {
                                      try {
                      				alert('5');
                                          xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                      } catch (e) {}
                                  }
                              }
                      
                              if (!xhr) {
                      			
                                  alert('Abandon :( Impossible de créer une instance XMLHTTP');
                                  return false;
                              }
                      	
                      	return xhr;
                      }
                      function Supprimer(id){
                      alert('6');
                      	var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
                      	alert('7');
                      
                      	xhr.open("GET", "supprimer.php?id=" + id + "", true);
                      	alert('8');
                      	xhr.send(null);
                      	alert('9');
                      	window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
                      }
                      
                      </script>
                      


                      Mais pas celui là:

                      <script>
                      function getXMLHttpRequest() {
                      	var xhr = false;
                      		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
                              if (window.XMLHttpRequest) { // Mozilla, Safari,...
                                  xhr = new XMLHttpRequest();
                                  if (xhr.overrideMimeType) {
                                      xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
                                  }
                              } else if (window.ActiveXObject) { // IE
                                  try {
                                      xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                  } catch (e) {
                                      try {
                                          xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                      } catch (e) {}
                                  }
                              }
                      
                              if (!xhr) {
                                  alert('Abandon :( Impossible de créer une instance XMLHTTP');
                                  return false;
                              }
                      	
                      	return xhr;
                      }
                      function Supprimer(id){
                      	var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
                      
                      	xhr.open("GET", "supprimer.php?id=" + id + "", true);
                      	xhr.send(null);
                      	window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
                      }
                      
                      </script>
                      


                      C'est étonnant!
                      1. ça ne marche pas pour nous ça ne nous parle pas beaucoup.

                        Qu'est ce qui ne marche pas ?

                        as tu mis des traces, des alert pour voir si la fonction ajax est bien appelée ?

                        etc..
                        1. Ca ne m'arrive quasiment jamais, mais la, c'est assez urgent...

                          UP...
                          1. Ca ne marche pas non plus :(

                            même si ca marche nickel sur mon serveur interne, sur 000webhost, pas moyen sous firefox...
                            1. Pb 1

                              essayes plutôt comme ça:

                              <script type="text/javascript">
                              function getXMLHttpRequest() {
                              	var xhr = false;
                              		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
                                      if (window.XMLHttpRequest) { // Mozilla, Safari,...
                                          xhr = new XMLHttpRequest();
                                          if (xhr.overrideMimeType) {
                                              xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
                                          }
                                      } else if (window.ActiveXObject) { // IE
                                          try {
                                              xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                          } catch (e) {
                                              try {
                                                  xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                              } catch (e) {}
                                          }
                                      }
                              
                                      if (!xhr) {
                                          alert('Abandon :( Impossible de créer une instance XMLHTTP');
                                          return false;
                                      }
                              	
                              	return xhr;
                              }
                              function Supprimer(id){
                              	var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
                              
                              	xhr.open("GET", "supprimer.php?id=" + id + "", true);
                              	xhr.send(null);
                              	window.location.replace('modifier.php?id=<?php echo $_GET['id'];?>');
                              }
                              </script>