Discussion :

[Pierre54000]

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 :

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
$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 :

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
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>

[Pierre54000]

Grosse précision :

Dans la colonne de gauche de ce forum, le gros + vert qui affiche des détails sur les membres qui ont posté ouvre un popup DHTML qui contient quelques infos propres au membre.

C'est exactement ce que je cherche à reproduire sur mon site, à savoir, afficher dans le popup les infos propre à un enregistrement.

Merci de m'aider

[RomainVALERI]

Une des raisons pour lesquelles on ne t'a pas répondu dans ces forums, c'est que certains forums sont très mal tenus, on y fait tout et n'importe quoi...

Par contre, ici, on a un minimum de règles.

Par exemple, tu pourras y lire qu'on demande aux posteurs de bien vouloir entourer leurs extraits avec des balises [code][/code],histoire d'y voir quelque chose...

[Pierre54000]

Merci pour ta réponse, j'ai fais la modification, encore désolé.

J'espere que ça pourra aider quelqu'un à y voir plus clair dans ma demande.

[RomainVALERI]

C'est mieux merci

On va jeter un oeil là dessus

[Pierre54000]

merci Romain.

si y'a besoin d'explications supplémentaires, faut pas hésiter à m'en demander car meme si ca peut paraitre clair dans mon esprit ca ne l'est peut etre pas dans celui de ceux qui me lisent

en tout cas je pense que ca n'est pas grand chose mais ça m'echappe totalement