Données dans une fênetre modale
Bonjour à tous,
Je poste mon problème ici en ne sachant pas vraiment si c'est un problème de JQuery ou de PHP
J'écris actuellement un plugin Wordpress gérant des Evénements et des Réservations associées à chaque Evenement.
Et la manière dont je voulais gérer ce plugin du coté administrateur c'était d'avoir une liste d'événement dans un tableau et que lorsqu'on clique sur un event une fenetre s'ouvre avec les informations de l'event et les réservations associées. J'ai réussi à faire ma fenêtre mais impossible de récuperer les données des événements. Si vous avez des idées je suis preneur :)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <tbody>
<?while ($rowevent = mysql_fetch_assoc($resultevent)) { ?>
<tr>
<td><a href="#?w=500" id=<?php echo $rowevent['id'];?> rel="popup_name" class="poplight"><?php echo$rowevent["post_title"];?></a></td>
<td><?php echo $rowevent["start"];?></td>
<td><?php echo $rowevent["id"] ;?></td>
</tr>
<?}?>
</tbody>
</table>
</div>
</body>
<div id="popup_name" class="popup_block">
<h2><?php echo $rowevent["post_title"];?></h2>
<p>
Nom de l'Evènement : <?php echo $rowevent["post_title"] ;?><br />
Date : <?php echo $rowevent["start"] ;?> <br/>
Emplacement : <?php echo $rowevent["address"];?> <br/>
</p>
</div> |
Je vous donne aussi mon script Jquery :
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
| jQuery(function($) {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
var eventID = $(this).attr('id');
//Récupérer les variables depuis le lien
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //La première valeur du lien
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({
'width': Number(popWidth)
})
.prepend('<a hred="#" class="close"><img src="/wp-content/plugins/AC-Booking/croix.png" class="btn_close" title="Close Window" alt="Close"/></a>');
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//On affecte le margin
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Effet fade-in du fond opaque
$('wpwrap').append('<div id="fade"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //...ils disparaissent ensemble
});
return false;
});
}); |
Merci d'avance
