2 pb en javascript: Ajax et compatibilité ie

Fermé
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010 - 18 janv. 2010 à 19:24
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010 - 23 janv. 2010 à 12:24
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!
A voir également:

14 réponses

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 janv. 2010 à 19:35
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
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010
18 janv. 2010 à 19:40
Ca ne marche pas non plus :(

même si ca marche nickel sur mon serveur interne, sur 000webhost, pas moyen sous firefox...
0
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010
20 janv. 2010 à 18:10
Ca ne m'arrive quasiment jamais, mais la, c'est assez urgent...

UP...
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 janv. 2010 à 13:41
ç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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
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
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 janv. 2010 à 18:49
je vois que tu as mis plein d'alert alors ce sont lesquelles qui s'affichent ?
0
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010
21 janv. 2010 à 19:44
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
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 janv. 2010 à 19:49
ooui mais ça c'est les alert du script qui fonctionne, fais la même chose avec celui qui ne fonctionne pas
0
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010
21 janv. 2010 à 19:50
Celui qui ne fonctionne pas, c'est le même que celui qui fonctionne sauf qu'il n'y a pas les
alert

0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 janv. 2010 à 19:54
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
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 janv. 2010 à 20:00
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
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010
21 janv. 2010 à 20:02
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
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 janv. 2010 à 21:31
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
Fidji56 Messages postés 58 Date d'inscription vendredi 30 janvier 2009 Statut Membre Dernière intervention 26 mars 2010
23 janv. 2010 à 12:24
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