2 pb en javascript: Ajax et compatibilité ie

Fidji56 Messages postés 58 Date d'inscription   Statut Membre Dernière intervention   -  
Fidji56 Messages postés 58 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   894
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
Ca ne m'arrive quasiment jamais, mais la, c'est assez urgent...

UP...
0
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
ç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
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
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   894
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   894
 
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   Statut Membre Dernière intervention   894
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   894
 
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   Statut Membre Dernière intervention  
 
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