2 pièce(s) jointe(s)
[AJAX] taille de div après xhr
Bonjour à tous,
Je ne suis pas sur que le souci vienne du code ajax, mais je ne vois pas bien d'où vient le souci et comme il se produit après une xhr...
Donc j'ai ce code:
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
| <?php
if(!isset($connexion))
include_once 'connexionBDD.php';
if(isset($_POST['nomInstance'])) {
try {
$instance=$_POST['nomInstance'];
$result=$connexion->prepare('SELECT idPve, srcImageBoss, nomBoss, down FROM pve WHERE titreInstance LIKE ? AND nomBoss IS NOT NULL ORDER BY idPve');
$result->bindParam(1, $instance);
$result->execute();
$cpt=0;
echo "<table class='formulairePve'>";
while($ligne = $result->fetch()) {
$dimensionsImage=getimagesize($ligne['srcImageBoss']);
if($ligne['down']==0)
$backgroundColor="red";
else
$backgroundColor="#007700";
if($cpt%4==0) {
echo "<tr>
<td>
<center>".strtoupper($ligne['nomBoss'])."<br />
<div class='color' style='background-color:".$backgroundColor."; width:".$dimensionsImage[0]."; height:".$dimensionsImage[1].";'>
<img style='filter:alpha(opacity=80);opacity:.70;' src='".$ligne['srcImageBoss']."' alt='".$ligne['nomBoss']."'>
</div></center>
</td>";
} elseif($cpt%4==3) {
echo "<td>
<center>".strtoupper($ligne['nomBoss'])."<br />
<div class='color' style='background-color:".$backgroundColor."; width:".$dimensionsImage[0]."; height:".$dimensionsImage[1].";'>
<img style='filter:alpha(opacity=80);opacity:.70;' src='".$ligne['srcImageBoss']."' alt='".$ligne['nomBoss']."'>
</div></center>
</td>
</tr>";
} else {
echo "<td>
<center>".strtoupper($ligne['nomBoss'])."<br />
<div class='color' style='background-color:".$backgroundColor."; width:".$dimensionsImage[0]."; height:".$dimensionsImage[1].";'>
<img style='filter:alpha(opacity=80);opacity:.70;' src='".$ligne['srcImageBoss']."' alt='".$ligne['nomBoss']."'>
</div></center>
</td>";
}
$cpt++;
}
echo "</table>";
} catch(PDOException $e) {
print "Erreur !: " . $e->getMessage() . "<br/>";
die();
}
}
?> |
Le souci vient plus précisément de cette partie:
Code:
1
2
3
4
5
6
| <td>
<center>".strtoupper($ligne['nomBoss'])."<br />
<div class='color' style='background-color:".$backgroundColor."; width:".$dimensionsImage[0]."; height:".$dimensionsImage[1].";'>
<img style='filter:alpha(opacity=80);opacity:.70;' src='".$ligne['srcImageBoss']."' alt='".$ligne['nomBoss']."'>
</div></center>
</td> |
width:".$dimensionsImage[0]."; height:".$dimensionsImage[1].";
Sert à donner à la div les mêmes dimensions que l'image source.
Seulement, avec la récupération de "nomInstance" en POST via xhr, ça ne fonctionne pas, cela donne:
Pièce jointe 93709
Par contre, si je change la méthode de récupération de nomInstance et la mets en GET, et rentre la valeur via l'URL ça fonctionne bien:
Pièce jointe 93710
Au niveau du code source, dans le premier cas ça donne:
Code:
1
2
3
4
5
6
| <td>
<center>YAHOOOOOOOOOOOO<br />
<div class='color' style='background-color:red; width:70; height:56;'>
<img style='filter:alpha(opacity=80);opacity:.70;' src='./image/orange.jpg' alt='yahoooooooooooo'>
</div></center>
</td> |
Et dans le second:
Code:
1
2
3
4
5
6
| <td>
<center>YAHOOOOOOOOOOOO<br />
<div class='color' style='background-color:red; width:70; height:56;'>
<img style='filter:alpha(opacity=80);opacity:.70;' src='./image/orange.jpg' alt='yahoooooooooooo'>
</div></center>
</td> |
Je n'y vois donc pas de différence. Bref je ne vois pas d'où ça vient. Merci par avance.
NB: Code de la xhr:
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
| var img = document.getElementsByClassName('pveTab')[0].getElementsByTagName('img');
var left=document.getElementById('left');
var div = left.appendChild(document.createElement('div'));
div.className="detailPvE";
for(var i=0; i<img.length; i++) {
img[i].onmouseover=function(){
var instance=this.className;
xhr=new XMLHttpRequest();
var param="nomInstance="+instance;
xhr.open("POST", "./detailPve.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange=function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result=xhr.responseText;
div.innerHTML=result;
test.value=result;
div.style.zIndex=200;
}
};
xhr.send(param);
};
img[i].onmouseout=function() {
div.innerHTML="";
}; |
