[AJAX] XMLHTTPrequest et DIV imbriqués
Bonjour,
J'utilise peu le forum car de manière général il suffit de chercher pour trouver! mais là je ne comprends pas, certainement par manque de connaissance, donc je poste ma question en faisant à appel à la communauté, en esperant être dans le bon forum :
J'affiche des imagettes en provenance d'un répertoire et en cliquant sur une imagette l'image s'agrandit. Rien de bien difficile jusquel là.
J'ai des DIV imbriqués <div id="galerie"><div id="image"></div><div id="texte"></div> </div>
"image" et "texte" sont imbriqués dans "galerie". Les DIV sont imbriqués pour utilisé le positionnement relatif.
J'affiche dans "galerie" le résultat d'une requêtre à l'aide de XMLHTTPrequest et dans image une des images de la galerie. Pour mon exemple j'ai retiré tout le code qui permet d'afficher l'image à partir des imagettes.
Voilà ce qu'il se passe : l'image s'affiche, puis lorsque la galerie s'affiche (retour de la requete) l'image disparait. Le plus fort est que lorsque j'intégre à la main dans le code (dans la balise "galerie") le résultat de la requête (en recopiant le résultat et en enlevant l'appel de la requete) ça marche.
Si j'enlève l'imbrication des DIV ça marche également.
Il doit me manquer une info sur le comportement de XMLHTTPrequest ?
Même comportement sur IE7 et Firefox 2
J'ai désactivé le CSS, même comportement
Si d'aventure vous aviez une idée à me soumettre pour tester je suis preneur pour que l'image reste affichée après l'affichage de la galerie.
Merci à tous de votre coup de main...
Vous pouvez tester là mon exemple = > http://www.marylincavin.net/Untitled-8.html
j'ai beaucoup simplifié le code pour le test et pour vous le soumettre -----
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
xhr = null;
}
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("ATTENTION : \n Votre navigateur ne supporte pas les objets XMLHTTPRequest - installer la dernière version de Microsoft Internet Explorer ou de Mozilla Firefox...\n Your browser don't support XMLHTTPRequest objects - Pleas, install last version of Microsoft Internet Explorer or Mozilla Firefox...");
}
return xhr;
}
function aff_galeries(GALERIE_NUMBER, baliseDIV){
var pageAjax1 = 'http://www.marylincavin.net/aff_galerie8.php?galerie_a_afficher=';
var pageAjax = pageAjax1 + GALERIE_NUMBER;
var baliseDIVaff = baliseDIV;
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById(baliseDIVaff).innerHTML = xhr.responseText;
}
}
xhr.open("GET",pageAjax,true);
xhr.send(null);
}
</script>
</head>
<body onload="aff_galeries('GALERIE1', 'galerie')">
<div id="galerie">
<div id="aff_image"><img src="visuels/galerie/100x100.jpg"></div>
</div>
</body>
</html> |
