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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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:

Nom : bug.png Affichages : 72 Taille : 16,5 Ko

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:

Nom : pasBug.png Affichages : 90 Taille : 11,2 Ko

Au niveau du code source, dans le premier cas ça donne:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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="";
		};