Les Allergies
Alimentaires
Posez votre question Signaler

2 pb en javascript: Ajax et compatibilité ie

Fidji56 36Messages postés 6 janvier 2010Date d'inscription 26 mars 2010Dernière intervention - Dernière réponse le 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!
Lire la suite 

2 pb en javascript: Ajax et compatibilité ie »

14 réponses
Réponse
+0
moins plus
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>
Ajouter un commentaire
Réponse
+0
moins plus
Ca ne marche pas non plus :(

même si ca marche nickel sur mon serveur interne, sur 000webhost, pas moyen sous firefox...
Ajouter un commentaire
Réponse
+0
moins plus
Ca ne m'arrive quasiment jamais, mais la, c'est assez urgent...

UP...
Ajouter un commentaire
Réponse
+0
moins plus
ç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..
Ajouter un commentaire
Réponse
+0
moins plus
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!
Ajouter un commentaire
Réponse
+0
moins plus
je vois que tu as mis plein d'alert alors ce sont lesquelles qui s'affichent ?
Ajouter un commentaire
Réponse
+0
moins plus
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)
Ajouter un commentaire
Réponse
+0
moins plus
ooui mais ça c'est les alert du script qui fonctionne, fais la même chose avec celui qui ne fonctionne pas
Ajouter un commentaire
Réponse
+0
moins plus
Celui qui ne fonctionne pas, c'est le même que celui qui fonctionne sauf qu'il n'y a pas les
alert

Ajouter un commentaire
Réponse
+0
moins plus
la je ne comprend plus si c'est le mêm script où est le problème ?

par contre mets
<script type="text/javascript">
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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...
Ajouter un commentaire
Réponse
+0
moins plus
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>
Ajouter un commentaire
Réponse
+0
moins plus
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+
Ajouter un commentaire
Ce document intitulé « 2 pb en javascript: Ajax et compatibilité ie » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?