Soucis d'affichage de données dans un popup DHTML
Bonjour,
Apres avoir posté sur 2 autres gros forums et n'avoir jamais reçu de réponse ... je tente ma chance ici en esperant avoir plus de chance :)
J'ai un soucis avec un Popup DHTML dans lequel je n'arrive pas à afficher dynamiquement le contenu des champs de ma Bdd.
J'ai une petite requete sql suivie d'une while qui affiche dans la page les noms des produits.
Sous ces noms se trouve une image clickable qui ouvre chacune un popup DHTML.
Tout se passe bien SAUF qu'il m'est impossible d'afficher dans le popup le nom du produit associé au lien cliqué.
Même en mettant tout ça dans la boucle While qui gere l'affichage des noms dans la page, la popup recupere toujours uniquement le premier nom de la liste, du coup, mes 3 Popups contiennent tous la meme chose.
J'ai bien essayé de passer l'id en parametre dans l'url du lien cliqué mais idem, impossible de le recupérer ou de l'afficher dans le popup.
Si je pouvais ne serait-ce que le récupérer l'ID dans le <div>, je pense que je pourrais me débrouiller avec une seconde requete sql.
Le script est visible ici avec son "bug" de fonctionnement :
(je pense que ca sera plus parlant de vous le montrer directement)
http://www.the-warriors.fr/test-dhtml.php
Soit je suis stupide, soit il me manque des notions car je débute mais dans tous les cas, j'ai besoin d'aide.
Merci d'avance
Le morceau du code concerné (épuré de choses non utiles ici) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $query = "SELECT * FROM table WHERE id > 0 ORDER BY nom ASC";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
$id = $row['id'];
$nom = $row['nom];
echo '<a href="#" onClick="fireMyPopup();">'.$nom.'</a><br>';
echo '<div id="styled_popup" name="styled_popup" style="position: absolute; margin-left: auto; margin-right: auto; width: 940px; display: none; zoom: 1;">
<table width="500" cellpadding="0" cellspacing="0" border="0" class="bdcolor">
<tr>
<td style="background-color:#ff0000; width: 500px; height: 350;" align="center">'.$nom.'<br><br><a href="#" onClick="javascript:fadeOutMyPopup();">Fermer le popup</a>
</td>
</tr>
</table>
</div>';
} |
Le javascript utilisé :
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
60
61
62
63
64
65
66
67
| <script type='text/javascript'>
// Browser safe opacity handling function
function myPopupRelocate() {
var scrolledX, scrolledY;
if( self.pageYOffset ) {
scrolledX = self.pageXOffset;
scrolledY = self.pageYOffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrollTop;
}
var centerX, centerY;
if( self.innerHeight ) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}
var leftOffset = scrolledX + (centerX - 940) / 2;
var topOffset = scrolledY + (centerY - 350) / 2;
document.getElementById("styled_popup" ).style.top = topOffset + "px";
document.getElementById("styled_popup" ).style.left = leftOffset + "px";
}
function setOpacity( value ) {
document.getElementById("styled_popup" ).style.opacity = value / 10;
document.getElementById("styled_popup" ).style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeInMyPopup() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
function fadeOutMyPopup() {
for( var i = 0 ; i <= 100 ; i++ ) {
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
setTimeout('closeMyPopup()', 800 );
}
function closeMyPopup() {
document.getElementById("styled_popup" ).style.display = "none"
}
function fireMyPopup() {
myPopupRelocate();
document.getElementById("styled_popup" ).style.display = "block";
document.body.onscroll = myPopupRelocate;
window.onscroll = myPopupRelocate;
setOpacity( 0 );
fadeInMyPopup();
}
</script> |
