Discussion :

[garheb]

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:



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:



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="";
		};

[NoSmoking]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style='background-color:red; width:70; height:56;'

devrait être

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style='background-color:red; width:70px; height:56px;'

avec précision de l'unité d'affichage, ici px.

De plus pourquoi mettre cela dans l'attribut style alors que la DIV à déjà une class.

Pourquoi mettre une DIV conteneur et ne pas mettre l'image directement dans la TD ?

Bon ceci étant pour ton soucis pb de cache...

[garheb]

En effet je n'ai pas fait attention à l'unité...

Tout fonctionne donc. :p

Pour la DIV, justement le but c'est d'appliquer le background que sur l'image, si je n'ai pas la div je devrais le mettre sur la td et donc il s'appliquera sur toute celle-ci.

Au sujet de style, il s'agit là d'adapter la taille et la couleur à partir de résultat de requête, je ne peux donc pas dire à l'avance "celle-ci sera verte, celle-là rouge", mais j'aurais pu en effet mettre class=vert et class=rouge, mais ça ne règle pas le souci de la taille de la div qui dépend de la taille de l'image.

Merci en tous cas!