Soucis d'affichage de données dans un popup DHTML

**Pierre54000** · 31/07/2011, 10h23

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** · 31/07/2011, 10h45

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** · 31/07/2011, 15h17

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** · 31/07/2011, 15h25

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** · 31/07/2011, 17h55

C'est mieux merci

On va jeter un oeil là dessus

**Pierre54000** · 31/07/2011, 18h57

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

**Pierre54000** · 31/07/2011, 19h07

Le script est visible ici en condition réelle 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

Cliquez au choix sur le logo "details" ou "article de collection" en dessous d'un objet.

Vous verrez que le popup affiche toujours un contenu lié au premier objet situé en haut a gauche au lieu d'afficher le contenu correspondant au lien cliqué sous l'objet.

(j'espere avoir été un peu plus clair)

PS: j'ai modifié mon post initial pour clarifier le tout et abandonner mon exemple abstrait.

**RomainVALERI** · 31/07/2011, 21h30

Tu parles bien de la popup qui s'ouvre quand on clique une des images "article de collection" qui sont présentes sous chaque miniature, c'est ça ?

Parce que toutes ces images déclenchent la fonction fireMyPopup, sans argument particulier... n'est-ce pas ici qu'il faudrait "personnaliser" l'appel ? J'imagine que c'est ton while en php qui génère ces liens et les événements attachés ?

**Pierre54000** · 31/07/2011, 22h47

Oui, je parle bien de la popup toute moche pour le moment toute rouge qui apparait en cliquant sur les logos "article de collection" et "détails".

pour la page, oui c'est le while qui genere tout ça automatiquement.

c'est justement pour personnaliser l'appel que je galere.

chaque miniature a un id unique et meme lorsque je le passe en parametre dans le lien clickable (du genre page.php?id_pour_popup=$id), il m'est impossible de le recuperer dans le popup.

si tu regardes bien, le popup contient toujours le meme nom d'objet, le premier en haut a gauche alors qu'il devrait changer.

**RomainVALERI** · 31/07/2011, 23h16

Toutes les images en question font un appel à la fonction fireMyPopup() qui rend visible une div unique et définie en dur par son id ("styled_popup") ... normal que ce soit toujours le même nom qui apparaisse.

On peut en tout cas écarter la piste "x popups contenant toutes le même nom".

Il me semble que ton code PHP devrait créer autant de popup (cachées, comme celle-ci) qu'il y a de liens et l'appel à fireMyPopup passerait en argument l'id de la popup à afficher. Qu'en penses-tu ?

**Pierre54000** · 01/08/2011, 08h28

Je suis tout à fait ta logique et j'etais arrivé un peu a la meme conclusion.

mon soucis c'est que je ne sais pas comment faire pour "personnaliser" l'id de la <div> car cet id est également intégré dans le javascript qui gere le popup.
(et en javascript, je n'y connais rien du tout)

je pense que l'id de la <div> devrait correspondre à l'id de l'objet stocké en base de donnée, mais par contre, je n'ai aucune idée de comment faire comprendre ça au javascript qui gere popup, ni comment lui transmettre cette information.

**RomainVALERI** · 01/08/2011, 09h28

Même si on est pas sur le forum PHP, sors-nous le passage où tu génères cette partie (vignettes avec leurs liens), voire aussi le passage où tu génères la popup dont l'id est "styled_content" (ça doit être une chaine en dur, ça se retrouve, ça

)

**Pierre54000** · 01/08/2011, 10h53

oui l'id "styled_popup" est en dur dans le code.

voici la requete ainsi que l'intégralité de la boucle while gérant l'affichage des miniatures :

Désolé pour le code un poil "bordélique" mais la page étant en chantier, je tape dedans tous les jours pour essayer de trouver une solution à mon soucis.

PS : la variable $limite sert uniquement à gérer le saut de ligne tous les 3 produits, n'en tenez pas compte.

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
$limite = 0;
 
$query = "SELECT * FROM ventes_privees WHERE produit_id > 0 $addon_requete $addon_requete_vintage $addon_nondispo ORDER BY nom ASC";
$result = mysql_query($query);
 
echo'<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%"><tr><td><span class="menu">&nbsp;</span></td></tr><tr>';
 
while ($row = mysql_fetch_array($result))
{  
        $id = $row['produit_id'];
        $nom = $row['nom'];
        $nom_bulle = trim(rtrim(addslashes(stripslashes($nom))));
        $prix = $row['prix'];
        $exemplaires = $row['exemplaires'];
        $description = $row['description'];
        $description_bulle = trim(rtrim(addslashes(stripslashes($description))));
        $etat = $row['etat'];
        $categorie = $row['categorie'];
        $type_de_produit = $row['type_de_produit'];
        $width = $row['photo_mini_width'];
        $height = $row['photo_mini_height'];
 
        if ( $categorie == "Collection." ) { $txt_under ='<img src="design/article_collection.gif" border="0" width="230" height="20">'; } else { $txt_under = '<img src="design/article_details.jpg" border="0" width="230" height="20">'; }
 
        if ( $exemplaires > 0 ) { $fond_vp = "design/logo-vp-dispo.jpg"; } else { $fond_vp = "design/logo-vp-epuise.jpg"; }
 
        $limite = $limite + 1;
 
        echo'<td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td align="center" bgcolor="#FFFD7A" colspan="2" class="bdcolor"><span class="titre"><b>'.$nom.'</b><span></td></tr>
<tr><td align="center" valign="middle" width="230" height="120" class="bdcolor" background="'.$fond_vp.'" colspan="2"><img src="images-vp/'.$id.'.jpg" pbsrc="images-vp/'.$id.'.jpg" onclick="Pop(this,50,\'PopBoxImageLarge\');" class="PopBoxImageSmall" width="'.$width.'" height="'.$height.'" class="bdcolor" title="'.$nom.'"></td></tr>
<tr><td align="center" bgcolor="#FFFD7A" width="50%" class="bdcolor"><span class="titre"><b>Stock :<font color="#960D0D"> '.$exemplaires.'</font></b><span></td><td bgcolor="#FFD57A" align="center" width="50%" class="bdcolor"><span class="titre"><b>Prix :<font color="#960D0D"> '.$prix.' euros</font></b><span></td></tr><tr><td align="center" colspan="2"><a href="ventes_privees.php#open" onClick="fireMyPopup();">'.$txt_under.'</a>
</td></tr></table>';
 
        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 de cet objet :<br><br>'.$nom.'<br><br><a href="ventes_privees.php#close" onClick="javascript:fadeOutMyPopup();">Fermer la fenetre</a></td></tr></table></div>';
 
        if ($limite == 3)
        {
                $limite = 0;
                echo '</td></tr><tr><td height="20"><span class="menu"><br></span></td></tr>';
        }
}

**RomainVALERI** · 01/08/2011, 11h04

Non, alors en effet j'avais mal vu : il y a bien autant de popup "styled_popup" que de liens, mais tous les liens appellent la même popup... ce qu'il manque c'est de concaténer l'id utilisé dans la boucle à l'id de la div (styled_popupX) puis de récupérer cette info dans fireMyPopup pour afficher la bonne ^^ (voir en rouge dans les extraits ci-dessous)

Code php :

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

1
2
3
4
5
echo'<td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td align="center" bgcolor="#FFFD7A" colspan="2" class="bdcolor"><span class="titre"><b>'.$nom.'</b><span></td></tr>
<tr><td align="center" valign="middle" width="230" height="120" class="bdcolor" background="'.$fond_vp.'" colspan="2"><img src="images-vp/'.$id.'.jpg" pbsrc="images-vp/'.$id.'.jpg" onclick="Pop(this,50,\'PopBoxImageLarge\');" class="PopBoxImageSmall" width="'.$width.'" height="'.$height.'" class="bdcolor" title="'.$nom.'"></td></tr>
<tr><td align="center" bgcolor="#FFFD7A" width="50%" class="bdcolor"><span class="titre"><b>Stock :<font color="#960D0D"> '.$exemplaires.'</font></b><span></td><td bgcolor="#FFD57A" align="center" width="50%" class="bdcolor"><span class="titre"><b>Prix :<font color="#960D0D"> '.$prix.' euros</font></b><span></td></tr><tr><td align="center" colspan="2"><a href="ventes_privees.php#open" onClick="fireMyPopup("'.$id.'");">'.$txt_under.'</a>
</td></tr></table>';

Code php :

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

echo '<div id="styled_popup'.$id.'" 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 de cet objet :<br><br>'.$nom.'<br><br><a href="ventes_privees.php#close" onClick="javascript:fadeOutMyPopup();">Fermer la fenetre</a></td></tr></table></div>';

Code javascript :

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

1
2
3
4
5
6
7
8
function fireMyPopup(idPopup) {
 	myPopupRelocate();
 	document.getElementById("styled_popup" + idPopup).style.display = "block";
 	document.body.onscroll = myPopupRelocate;
 	window.onscroll = myPopupRelocate;
	setOpacity( 0 );
	fadeInMyPopup();
}

Je ne suis pas allé voir en détail les autres appels contenus dans le fonction fireMyPopup, si ça se trouve il reste quelques autres points à raccomoder sur le même principe, en passant l'id concerné... ^^

Dis-nous si ça passe

**Pierre54000** · 01/08/2011, 11h38

pour le moment, non, le popup refuse meme de s'ouvrir

J'ai du mal à comprendre la logique et l'utilisation du "idpopup", ca doit venir de la.

je suis désolé mais je suis perdu :/

l'etat actuel de script :

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(idPopup) {
  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" + idPopup).style.top = topOffset + "px";
  document.getElementById("styled_popup" + idPopup).style.left = leftOffset + "px";
}
 
function setOpacity( value ) {
	document.getElementById("styled_popup" + idPopup).style.opacity = value / 10;
	document.getElementById("styled_popup" + idPopup).style.filter = 'alpha(opacity=' + value * 10 + ')';
}
 
function fadeInMyPopup(idPopup) {
	for( var i = 0 ; i <= 100 ; i++ )
		setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
 
function fadeOutMyPopup(idPopup) {
	for( var i = 0 ; i <= 100 ; i++ ) {
		setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
	}
 
	setTimeout('closeMyPopup()', 800 );
}
 
function closeMyPopup(idPopup) {
	document.getElementById("styled_popup" + idPopup).style.display = "none"
}
 
function fireMyPopup(idPopup) {
 	myPopupRelocate();
 	document.getElementById("styled_popup" + idPopup).style.display = "block";
 	document.body.onscroll = myPopupRelocate;
 	window.onscroll = myPopupRelocate;
	setOpacity( 0 );
	fadeInMyPopup();
}
</script>

et le <div>

Code :

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

1
2
<div id="styled_popup'.$id.'" name="styled_popup'.$id.'" 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 de cet objet :<br><br>'.$nom.'<br><br><a href="test-dhtml.php#close" onClick="javascript:fadeOutMyPopup();">Fermer la fenetre</a></td></tr></table></div>

**RomainVALERI** · 01/08/2011, 17h34

Oui, ce sont les appels à FireMyPopup qui ne vont pas, c'est moi qui t'ai induit en erreur :

Code :

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

onClick="fireMyPopup("99");"

Les guillemets cassent la chaine HTML, il faut les échapper.
Remplace le passage correspondant en PHP : onClick="fireMyPopup("'.$id.'")par onClick="fireMyPopup(\"'.$id.'\")

**Pierre54000** · 01/08/2011, 18h59

merci, je viens d'essayer mais c'est toujours pareil, le popup ne s'ouvre plus.

http://www.the-warriors.fr/test-dhtml.php

j'ai l'impression que c'est le javascript qui s'y perd avec le "idpopup"

faut peut etre remplacer "idpopup" par une valeur ou quelque chose du genre ?
Moi je l'ai mis tel quel , ca vient peut etre de la ?

faut que le javascript soit également dans le while peut etre ? (mais j'en doute)

Soucis d'affichage de données dans un popup DHTML

JavaScript

Discussions similaires

Partager

Partager