Popup Dynamique

Eléphant du PHP | 184 Messages

09 mai 2012, 14:53

Bonjour à vous,

J'ai essaye de faire un popup dynamique grâce à un Javascript que vous m'avez conseillez sur un autre sujet.
Tout marche bien mais mon soucis, c'est que j'essaye de le faire apparaître quand je clique.
Mais quand je clique, j'ai toujours le dernier enregistrement qui apparaît dans le popup.

J'ai compris pourquoi cela ne marchait pas, car le popup ne peut pas savoir de quel enregistrement je parle, mais je ne sais pas
comment faire pour faire passer une variable ou une quelconque information qui permettrait à mon popup de savoir quel enregistrement je veux qui l'affiche.
( Vu que je reste sur la même page )

Si quelqu'un pouvait me donner un coup de main, j'y suis depuis hier c'est la galère.

Merci à vous voici où j'en suis:
while ($result_news = mysql_fetch_array($retour_news)){?>

<a href="#" onClick="javascript: document.getElementById('showimage').style.display='block';"><span style="font-size:16px;"><strong><?php echo html_entity_decode($result_news['titre']);?></strong></span> - <span style="font-size:12px;"><?php echo $result_news['date_fr'];?></span></a>
<br /><br />

<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px; display:none;">

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
  <tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36px">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
        color="#FFFFFF"><strong><small><?php echo html_entity_decode($result_news['titre']);?></small></strong></font></layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="images/close.gif" width="16px"
        height="14px" border=0></a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- PUT YOUR CONTENT BETWEEN HERE -->

<span style="font-size:16px;"><strong><?php echo html_entity_decode($result_news['titre']);?></strong></span> - <span style="font-size:12px;"><?php echo $result_news['date_fr'];?></span></a>
<br /><br />

<?php echo $result_news['texte'];?>

<!-- END YOUR CONTENT HERE -->

</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>


<?php
}
?>

</div>

Avatar du membre
ViPHP
xTG
ViPHP | 7331 Messages

09 mai 2012, 14:59

Il faut que tu stockes dans une variable JS de type array toutes tes données puis que tu passes en paramètre l'index de l'array concerné où aller lire les données.
Ou bien tu charges les données avec de l'Ajax en appelant un script PHP qui renvoie le bon contenu.

Eléphant du PHP | 184 Messages

09 mai 2012, 16:45

Heuuu, merci pour cette réponse mais je ne connais pas du tout cette méthode.

Il est possible de m'aiguiller un peu plus ? :(

Avatar du membre
ViPHP
xTG
ViPHP | 7331 Messages

09 mai 2012, 18:18

Plus simple sinon.
Une popup avec un id différent.
<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px; display:none;">
Ainsi pas de problème d'écraser les informations des autres lignes.

Car actuellement en fait tu dois générer des erreurs de validation du HTML à cause de cela. :)

Donc en gros il faudrait rajouter un nombre incrémenté à chaque itération de la boucle dans l'id utilisé.

Code : Tout sélectionner

showimage1 showimage2 ect

Eléphant du PHP | 184 Messages

09 mai 2012, 18:49

Dans mon onclick:

[javascript]
onClick="javascript&#058; document.getElementById('showimage').style.display='block';">
[/javascript]

Il n'est pas possible de faire passer une variable du genre:

[javascript]
onClick="javascript&#058; document.getElementById('showimage').style.display='block'; var=<?php echo $result['id"];?>;">
[/javascript]

Puis de récupérer cet id pour comparaison dans une nouvelle requête pour le popup.

Car là je capte rien du tout, je ne sais pas par ou commencer.

Avatar du membre
ViPHP
xTG
ViPHP | 7331 Messages

09 mai 2012, 18:58

Bah en fait il faudrait juste :
onClick="javascript&#058; document.getElementById('showimage<?php echo $i; ?>').style.display='block';">
<div id="showimage<?php echo $i; ?>" style="position:absolute;width:250px;left:250px;top:250px; display:none;">
Avec cette variable $i qui est définie et incrémentée dans ta boucle while.

Car actuellement ton code génère bien un code de popup par ligne.
Mais tes popups ont toutes le même id (qui est un identifiant unique), donc seule la dernière peut être affichée.

Eléphant du PHP | 184 Messages

09 mai 2012, 19:13

D'accord ! Je n'avais pas compris cela de cette manière !
Effectivement cela marche parfaitement !

Il me reste un dernier petit soucis, c'est au sujet de la fermeture de ces popup.
Je suppose qu'il va falloir adapter aussi non ?
Car il me ne ferme le popup que s'il s'agit du dernier. Sinon cela ne fait rien quand je clique sur le croix.

La partie du script qui ferme:

[javascript]
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
[/javascript]

Le onclick:

[javascript]
<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="images/close.gif" width="16px"
height="14px" border=0></a></td>
[/javascript]

Je suppose que cela ne doit pas être grand chose, mais je n'y connais vraiment rien en Javascript :(
Dans tous les cas, merci pour ton aide :)

Avatar du membre
ViPHP
xTG
ViPHP | 7331 Messages

09 mai 2012, 19:33

Modifies la fonction hidebox() pour passer un paramètre.
Tu lui passes l'id et tu remplaces dans la fonction chaque partie statique. ;)

Eléphant du PHP | 184 Messages

10 mai 2012, 08:35

Re-bonjour,

J'ai passé une bonne partie de ma soirée hier, mais je n'y arrive toujours pas.
Je dois confondre le PHP avec le Javascript que je ne connais pas bien car la logique m'échappe.

J'en suis à ce niveau, si vous voulez bien encore me dépanner, je galère à mort sur le principe.

[javascript]
function hidebox(<?php echo $result['ID_news'];?>){
crossobj=ns6? document.getElementById("showimage<?php echo $result['ID_news'];?>") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
[/javascript]

[javascript]
<td style="cursor:hand"><a href="#" onClick="hidebox(<?php echo $result['ID_news'];?>);return false"><img src="images/close.gif" width="16px"
height="14px" border=0></a></td>
[/javascript]

Avatar du membre
ViPHP
xTG
ViPHP | 7331 Messages

10 mai 2012, 10:02

Ah bah non si tu insères du PHP cela va le rendre statique. :P
Regardes plutôt ceci :
function hello(numero){
  alert("Hello visiteur" + numero);
}
<?php
while(++$i < 5)
  echo 'alert(' . $i . ');'
?>
Dans cet exemple on appelle plusieurs fois la même fonction JS, mais avec une valeur différente.
C'est cela qu'il te faut. Or comme tu le vois, pas de PHP dans la fonction, que du JS. ;)

Eléphant du PHP | 184 Messages

10 mai 2012, 12:59

Impeccable j'ai bien mieux comprsi grace à cet exemple !
Cela marche nickel !

J'ai une dernière question sans vouloir abuser.

Il est possible de "freezer" le reste de l'écran à l'ouverture d'un popup ?
Du genre qu'il ne soit pas possible d'en ouvrir un autre sans d'abord fermer celui en cours ?

Car là le reste de l'écran reste cliquable et du coup on peut ouvrir pleins de popups à la suite.

Merci encore pour votre aide

Avatar du membre
ViPHP
xTG
ViPHP | 7331 Messages

10 mai 2012, 13:35

On peut jouer avec du CSS pour cela.
En gros le but est d'associer en dessous de la popup une div qui fait la taille de l'écran (avec un effet de transparence pour encore voir la page).
Ainsi le reste du site est non cliquable.
Pas de lien ou d'exemple (le css c'est pas mon fort), mais si je trouve je te poste ça.

Eléphant du PHP | 184 Messages

10 mai 2012, 14:27

Merci encore pour tout :)