2 pb en javascript: Ajax et compatibilité ie
Fidji56
Messages postés
62
Statut
Membre
-
Fidji56 Messages postés 62 Statut Membre -
Fidji56 Messages postés 62 Statut Membre -
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
supprimer.php
___________________________________________________________________________________________
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
Merci beaucoup pour vos réponses!
--
"J'ai toujours besoin d'aide, donc j'aide toujours les autres" Pensez-y!
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 à modifier sur la page pré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é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é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éconseillé 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é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
-
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> -
Ca ne marche pas non plus :(
même si ca marche nickel sur mon serveur interne, sur 000webhost, pas moyen sous firefox... -
Ca ne m'arrive quasiment jamais, mais la, c'est assez urgent...
UP... -
ç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.. -
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! -
je vois que tu as mis plein d'alert alors ce sont lesquelles qui s'affichent ?
-
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) -
ooui mais ça c'est les alert du script qui fonctionne, fais la même chose avec celui qui ne fonctionne pas
-
Celui qui ne fonctionne pas, c'est le même que celui qui fonctionne sauf qu'il n'y a pas les
alert
-
la je ne comprend plus si c'est le mêm script où est le problème ?
par contre mets
<script type="text/javascript"> -
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 -
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... -
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 jsfunction 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> -
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+