Ouvrir une Popup personnalisée grâce à un lien

[Kossaii]

Bonjour à tous.
Voilà j'ai un petit truc qui me prend la tete depuis un bout de temps.
Alors au lieu de me morfondre dans mon coin, je me suis dit que je pouvais toujours demander de l'aide.

Le but de la manip' est simple sur le papier.
Je clique sur une image et les données de cette image me permettent d'ouvrir une popup personnalisée sur la personne de cette image.
Ainsi je souhaiterais récupérer l'attribut name ou id d'un lien tel que celui-ci.

Code :

1
2
3
 
 
<a><img src="bob.png" id="photo" name="bob" onclick = "ouvrirPop();"></a>

Et me servir de ce nom d'attribut pour ouvrir une Popup personnalisée avec requete SQL à l'appui.

Ma fonction d'ouverture de popup ressemble a ca :

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
 
function ouvrirPop()
{
document.getElementById("monPompt").style.display = "block";
 
document.getElementById("idFond").style.display = "block";
}
 
function fermerPop()
{
  document.getElementById("monPrompt").style.display = "none";
  document.getElementById("idFond").style.display = "none";
}
 
 
function clicOk()
{
  fermerPop();
 
 
}
 
code html :
<div id="idFond" class="fond">
&nbsp;
</div>
 
      <!-- Boite de dialogue -->
<div id="monPrompt" class="conteneurPrompt">
 
  <div class="titrePrompt">
       Infos
  </div>
 
  <div class="contenuPrompt">
    <!-- debut - elements de la boite de dialogue -->
 
<?php
$sql = "SELECT * from Table where photo = '(id ou name correspondant au lien)' ";
...
 
?>
 
    <!-- fin - elements de la boite de dialogue -->
 
    <div class="boutonsPrompt">
      <br />
      <input type="button" value="Ok" id="idOk" class="ok" onclick="clicOk()" />
 
    </div>
 
  </div>
 
</div>
<!-- Fin - Boite de dialogue -->
 
<div>

Mais comment faire ?
J'ai beau retourner tout ca dans ma tete, je n'y vois pas grand chose.
Merci à vous pour votre aide.

PS : lien du code source
-> http://www.developpez.net/forums/d33...personnalisee/
Merci à Auteur.

[Bovino]

Salut et bienvenue sur nos forums

Tu n'as qu'à passer un paramètre dans la fonction :

Code html :

<a><img src="bob.png" id="photo" name="bob" onclick = "ouvrirPop(this.id);"></a>

puis :

Code :

1
2
3
4
5
6
7
function ouvrirPop(elem)
{
// Ici, tu fais une requête Ajax pour aller chercher les informations sur le serveur
document.getElementById("monPompt").style.display = "block";
 
document.getElementById("idFond").style.display = "block";
}

[Kossaii]

Merci pour ta réponse, Bovino.

Edit : Bon je viens vraiment de passer pour un newb, etant donné que d'une part je n'avais pas compris ce que tu voulais dire par requete Ajax et je n'y avais donc pas prêté attention et d'autre part comme mon message était inutile de par sa demande, je me permets de le supprimer/éditer.

Tu m'as donc proposé une requete Ajax.
Etant novice en la matiere, je suis allé voir ce que ca donnait sur le tuto correspondant...
Ce n'est pas gagné.
Mais si j'ai compris (un peu), ça devrait ressembler à :

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
 
function ouvrePop(elem)
{
 
var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    if(document.getElementById("photo") == elem{
 
    document.getElementById("monPrompt").style.display = "block";
    document.getElementById("idFond").style.display = "block";
 
    xhr.open("GET", "annuaire.php", true);
    xhr.send(null);
 
    }
}

-> annuaire.php étant ma page html/php

Manque-t-il des éléments comme : xhr.onreadystatechange ?
Mais là je ne vois pas comment l insérer ?

Merci.