2 pb en javascript: Ajax et compatibilité ie
Fidji56 -  
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.  Fidji56 Auteur
    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+
    0
    1. Alain_42
      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>
      0
      1. Fidji56 Auteur
        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...
        0
        1. Alain_42
          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
          0
          2. Alain_42
            la je ne comprend plus si c'est le mêm script où est le problème ?

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

              0
              1. Alain_42
                ooui mais ça c'est les alert du script qui fonctionne, fais la même chose avec celui qui ne fonctionne pas
                0
                1. Fidji56 Auteur
                  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)
                  0
                  1. Alain_42
                    je vois que tu as mis plein d'alert alors ce sont lesquelles qui s'affichent ?
                    0
                    1. Fidji56
                      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!
                      0
                      1. Alain_42
                        ç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..
                        0
                        1. Fidji56 Auteur
                          Ca ne m'arrive quasiment jamais, mais la, c'est assez urgent...

                          UP...
                          0
                          1. Fidji56 Auteur
                            Ca ne marche pas non plus :(

                            même si ca marche nickel sur mon serveur interne, sur 000webhost, pas moyen sous firefox...
                            0
                            1. Alain_42
                              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>
                              0

                              Discussions similaires

                              java script error in the main process
                              ceciel2307

                              3 réponses
                              Comment faire le signe au carré ² sur iPhone ?
                              Chloe0007

                              5 réponses
                              les 2 petits points sur le e ou sur le i
                              mimjca

                              2 réponses