Discussion :

[karamaster]

Bonsoir, j'affiche sur une page la photo et le nom des personne. Je voudrais afficher dans une fenêtre modal (par click) les toutes les informations sur une personne.
L'affichage est bon mais lorsque je click sur un n'importe quel nom c'est le premier enregistrement qui s'affiche.

j'ai trouver ce que code sur le NET mais je n'arrive pas à adapter à mon cas.

CSS

Code css :

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
.reveal-modal-bg { position: fixed; height: 100%;width: 100%;background: #000;background: rgba(0,0,0,.5);z-index: 100;display: none;top: 0;left: 0; }
.reveal-modal {	visibility: hidden;	top: 100px; left: 50%;margin-left: -300px;width: 520px;
	background: #eee url(modal-gloss.png) no-repeat -200px -80px;
	position: absolute;
	z-index: 101;
	padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
 
</style>

Php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
foreach($listIntervenant as $data){
<a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade">
<img src="photos/<?php echo $data->image ?>" width="150" height="136" alt="" />
 <div class="titleBlue" style="text-align:left;"><?php echo troncate($data->nom, 0, 150) ?><br /><span style="font-size:10px; font-style:italic; text-align:left;"><?php echo $data->fonction ?></span>
</a>
<div id="myModal" class="reveal-modal">
  <div class="titleBlackDark"><?php echo $data->nom; ?></div>
   <div class="titleBlue"><?php echo $data->fonction; ?></div><br />
  <div><img src="photos/<?php echo $data->image; ?>" alt="<?php //echo $nom; ?>" width="169" height="158" style="float:left; margin-right:10px; margin-bottom:0px;" />
  <?php echo html_entity_decode($data->biographie); ?></div>
  <a class="close-reveal-modal"><img src="css/fermer.png" border="0" width="24" height="24" alt=""></a>
</div>
}

[sabotage]

D'ou vient $listIntervenant ?

[karamaster]

C'est une variable contenant le résultat de ma requête.

Code :

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

1
2
3
$sql = $connect_db->query('SELECT * FROM intervenant');
$sql->setFetchMode(PDO::FETCH_OBJ);
$listIntervenant = $sql->fetchAll()

;

Au niveau de la requête, j'ai pas de problème. Le souci c'est comment récupérer les données sur la page et les affichées sur la fenêtre modal ?

[sabotage]

PHP est executé par le serveur ; il ne peut pas interagir dynamiquement après le chargement de la page.
Il faut utiliser de l'Ajax.

Le principe est :
- une requête PHP/Mysql qui recupère la liste des personnes (mais pas toutes les informations de chaque personne).
- une requête Ajax interroge PHP/Mysql lors de click dans la liste pour recuperer les informations supplémentaires et mettre à jour ta fenêtre modal.

[karamaster]

Merci pour le tuyau mais j'ai un problème dans la récupération de l'id en cours. Lorsque je click sur un nom c'est toujours les données liées à l'id 1 (le premier enregistrement de la table) qui s'affichent.

Page php d'appel: intervenants.php

Script ajax

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
<script type='text/javascript'>
function getXhr(){
  var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
					return xhr;
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function load(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les donnée sur l'intervenant
			document.getElementById('resultat').innerHTML = leselect;
		}
	}
	// Comment faire du post
	xhr.open("POST","detail_interv.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ici, l'id de div 
	idInterv = document.getElementById('interv').value;
	sr = xhr.send("idInterv="+idInterv);
}
</script>

Code html+php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="#">
   <input type="hidden" name="interv" id="interv" value="<?= $data->id?>"> <!-- Champ caché contenant l'id de l'intervenant -->
           <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade" onClick="load()">
           <img src="photos/<?= $data->image ?>" width="150" height="136" alt="" />
           <div class="titleBlue" style="text-align:left;"><?= troncate($data->nom, 0, 150) ?><br /><span style="font-size:10px; font-style:italic; text-align:left;"><?= $data->fonction ?></span></div>
           </a>
</form>
      <!-- Fenetre modal, div id resultat affiche les donnée liées à l'id envoyé-->
      <div id="myModal" class="reveal-modal">
           <div id="resultat"></div>
    </div>

Page php d'affichage des données à partir de l'id envoyé: detail_interv.php

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
<?php
 
	require('script/dbConnexion.php');
 
	if((isset($_POST['idInterv'])) && (!empty($_POST['idInterv']))){
 
		$q = $connect_db->prepare('SELECT * FROM intervenant WHERE id = :id');
		$q->bindValue(':id', $_POST['idInterv'], PDO::PARAM_INT);
		$q->execute();
		$q->setFetchMode(PDO::FETCH_OBJ);
 
		$interv = $q->fetch();
	}
 
?>
<div class="titleBlackDark"><?php echo $interv->nom; ?></div>
<div class="titleBlue"><?php echo $interv->fonction; ?></div><br />
<div>
    <img src="photos/<?php echo $interv->image; ?>" alt="<?php //echo $nom; ?>" width="169" height="158" style="float:left; margin-right:10px; margin-bottom:0px;" />
    <?php echo html_entity_decode($interv->biographie); ?>
</div>
<a class="close-reveal-modal"><img src="css/fermer.png" border="0" width="24" height="24" alt=""></a>

[sabotage]

Ce code est très différent de celui que tu nous as montré au début.

Tu as contrôlé l'id passé dans la requête ?

[karamaster]

C'est le même code de départ je n'ai pas tous copié et j'ai ajouté un form pour le post de l'id.

Code :

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

1
2
3
4
5
6
7
8
9
foreach($listIntervenant as $data){
   <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade">
        <img src="photos/<?php echo $data->image ?>" width="150" height="136" alt="" />
         <div class="titleBlue" style="text-align:left;"><?php echo troncate($data->nom, 0, 150) ?><br /><span style="font-size:10px; font-style:italic; text-align:left;"><?php echo $data->fonction ?></span>
   </a>
<div id="myModal" class="reveal-modal">
     <div id="resultat"></div>
</div>
}

Ce code pour afficher les information d'un enregistrement en fonction de l'id envoyé comme paramètre

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
<?php
 
	require('script/dbConnexion.php');
 
	if((isset($_POST['idInterv'])) && (!empty($_POST['idInterv']))){
 
		$q = $connect_db->prepare('SELECT * FROM intervenant WHERE id = :id');
		$q->bindValue(':id', $_POST['idInterv'], PDO::PARAM_INT);
		$q->execute();
		$q->setFetchMode(PDO::FETCH_OBJ);
 
		$interv = $q->fetch();
	}
 
?>
<div class="titleBlackDark"><?php echo $interv->nom; ?></div>
<div class="titleBlue"><?php echo $interv->fonction; ?></div><br />
<div>
    <img src="photos/<?php echo $interv->image; ?>" alt="<?php //echo $nom; ?>" width="169" height="158" style="float:left; margin-right:10px; margin-bottom:0px;" />
    <?php echo html_entity_decode($interv->biographie); ?>
</div>
<a class="close-reveal-modal"><img src="css/fermer.png" border="0" width="24" height="24" alt=""></a>

L'id passé en paramètre à toujours une seule valeur 1 (valeur du premier enregistrement).

[Kreepz]

Bonjour,

C'est normal pour toi dans ton premier code de mélanger HTML et PHP ?

Code :

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

1
2
3
4
5
6
7
8
9
foreach($listIntervenant as $data){
   <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade">
        <img src="photos/<?php echo $data->image ?>" width="150" height="136" alt="" />
         <div class="titleBlue" style="text-align:left;"><?php echo troncate($data->nom, 0, 150) ?><br /><span style="font-size:10px; font-style:italic; text-align:left;"><?php echo $data->fonction ?></span>
   </a>
<div id="myModal" class="reveal-modal">
     <div id="resultat"></div>
</div>
}

[karamaster]

Kreepz, je ne comprend pas très bien ce que tu veux dire. Mais le principe c'est de permettre d'afficher des donnée provenant d'une BDD en l'occurrence une liste de nom avec photo et à chaque click sur un nom toutes les information sur liées au nom (déterminé par son id) s'affichent dans une fenêtre modale. Là où se trouve le souci c'est de récupérer l'id du nom clické et le passé en paramètre dans la fenêtre modale pour afficher les données.

[Kreepz]

Ce que je veux dire c'est que le code que tu as mis ne peux fonctionner...
Dans ton php tu fais appel à des balises html:

Code :

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

1
2
3
4
foreach($listIntervenant as $data){ //<- PHP
   <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade">// <- HTML
...
}

[karamaster]

C'est une erreur dans mon copy/paste.

Code :

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

1
2
3
4
<?php foreach($listIntervenant as $data){  ?>
   <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade">// <- HTML
...
<?php } ?>

[karamaster]

Bonjour, j'ai pas encore trouver la solution à mon problème.

[sabotage]

Est-ce que tu vois le bon id :
- dans le formulaire
- dans l'envoi POST
- dans la page de traitement PHP
?

[karamaster]

Dans le
Formulaire : les id sont bel et bien là

Exemple

Code html :

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
<li>
<form method="post" action="#">
     <input type="hidden" name="interv" id="interv" value="5"> <!-- Champ caché contenant id de l intervenant -->
         <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade" onClick="load()">
         <img src="photos/image.jpg" width="150" height="136" alt="" />
          <div class="titleBlue" style="text-align:left;">NOM.<br /><span style="font-size:10px; font-style:italic; text-align:left;"> TEXTE1<br />TEXTE2</span></div>
         </a>
</form>
<!-- Fenetre modal, div id resultat affiche les donnée liées à id envoyé-->
 <div id="myModal" class="reveal-modal"><div id="resultat"></div></div>
</li>
 
<li>
<form method="post" action="#">
       <input type="hidden" name="interv" id="interv" value="6"> <!-- Champ caché contenant id de l intervenant -->
       <a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade" onClick="load()">
        <img src="photos/image2.jpg" width="150" height="136" alt="" />
        <div class="titleBlue" style="text-align:left;">NOM2<br /><span style="font-size:10px; font-style:italic; text-align:left;"> TEXTE3<br />TEXTE4</span></div>
      </a>
</form>

Dans dans l'envoi POST et la page de traitement PHP, j'ai la valeur 1 (qui correspond à l'id du 1er).

[sabotage]

A quoi servent ces formulaires et ces liens étant donné que c'est un traitement javascript qui fait le boulot ?
L'id doit être passé comme paramètre de la fonction load() et tout le reste est à mettre à la poubelle.

[Watilin]

Code :

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

1
2
3
	if((isset($_POST['idInterv'])) && (!empty($_POST['idInterv']))){
		...
		$q->bindValue(':id', $_POST['idInterv'], PDO::PARAM_INT);

Code html :

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

1
2
3
     <input type="hidden" name="interv" id="interv" value="5"> <!-- Champ caché contenant id de l intervenant -->
       ...
       <input type="hidden" name="interv" id="interv" value="6"> <!-- Champ caché contenant id de l intervenant -->

Tu ne confondrais pas interv et idInterv par hasard ?

C'est une question piège. Je sais que ta fonction load est censée envoyer idInterv. Cependant, nulle part tu n'annules l'évènement par défaut dans ta fonction.

Code HTML :

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

<a href='intervenant.php' ... onClick='load()'>

Quad l'utilisateur clique sur le lien, le navigateur suit le lien. La fonction load n'a pas le temps de s'exécuter car la page est changée.

Une petite remarque au passage, si tu mets des contrôles dans un formulaire, sers-toi d'un <input type="submit"> à la place d'un lien. Ou alors, garde le lien et retire le formulaire. Dans tous les cas tu as un évènement à annuler : le submit du formulaire ou le click du lien.

Code html :

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

1
2
3
<form ... onsubmit="load(event)">
<!-- ou bien -->
<a ... onclick="load(event)">

Code JS :

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

1
2
3
4
function load(event) {
   event.preventDefault();
   ...
}

[karamaster]

Bonjour Merci à tous pour le coup de main mon problème est résolu. Toutes mes excuses pour le retard avec lequel je répond.

Fonction JS

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
<script>
function load(idInterv){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les donnée sur l'intervenant
			document.getElementById('resultat').innerHTML = leselect;
		}
	}
	// Comment faire du post
	xhr.open("POST","detail_interv.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ici, l'id de div 
	//idInterv = document.getElementById('idInterv').value;
	sr = xhr.send("idInterv="+idInterv);
}
</script>

Page php d'envoi Id

Code :

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

1
2
3
4
<a href="intervenant.php" class="link" data-reveal-id="myModal" data-animation="fade" onClick="load(<?= $data->id ?>)"><img src="photos/<?= $data->image ?>" width="150" height="136" alt="" />
<div class="titleBlue" style="text-align:left;"><?= troncate($data->nom, 0, 150) ?><br /><span style="font-size:10px; font-style:italic; text-align:left;">
 <?= $data->fonction ?></span></div>
</a>

Page Php affichage

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
require('script/dbConnexion.php');
 
$q = $connect_db->prepare('SELECT * FROM intervenant WHERE id = :id');
$q->bindValue(':id', $_POST['idInterv'], PDO::PARAM_INT);
$q->execute();
$q->setFetchMode(PDO::FETCH_OBJ);
 
$interv = $q->fetch();
 
?>
<div class="titleBlackDark"><?php echo $interv->nom; ?></div>
<div class="titleBlue"><?php echo $interv->fonction; ?></div><br />
<div>
    <img src="photos/<?php echo $interv->image; ?>" alt="<?php //echo $nom; ?>" width="169" height="158" style="float:left; margin-right:10px; margin-bottom:0px;" />
    <?php echo html_entity_decode($interv->biographie); ?>
</div>
<a class="close-reveal-modal"><img src="css/fermer.png" border="0" width="24" height="24" alt=""></a>