Bonjour à tous. Je viens d'intégrer une fenêtre popup(html 5 + css) trouvée sur le net, à ma page de traitement de données de mes clients, sur mon site. Brièvement, au clic d'un bouton, la fenêtre apparait, le but étant d'afficher sur cette fenêtre certaines informations précises sur ce client. J'arrive à faire passer dans l'url le code du client concerné mais il m'est difficile de le recupérer à partir de php, sur le formulaire du popup. Pourtant je vois bien le code apparaitre dans l'url pendant que le popup est ouvert.
Je précise que tout s'effectue sur la meme page.
Merci d'avance de votre attention.
la communauté d'entraide francophone dédiée au PHP
Récupérer une variable get depuis une fenêtre popup [html5 + css]
Est-ce une ouverture via ajax ?
si tu le vois dans l'url, pourquoi ne le recupères tu pas en _GET via php ?
En régle générale, qu'as tu essayé, quest-ce qui marche / ne marche pas ?
si tu le vois dans l'url, pourquoi ne le recupères tu pas en _GET via php ?
En régle générale, qu'as tu essayé, quest-ce qui marche / ne marche pas ?
Spols
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube
Merci de ton attention Spots. Mon idée de départ était de pouvoir récupérer viaEst-ce une ouverture via ajax ?
si tu le vois dans l'url, pourquoi ne le recupères tu pas en _GET via php ?
En régle générale, qu'as tu essayé, quest-ce qui marche / ne marche pas ?
Code : Tout sélectionner
$_GET[]J'ai donc eu l'idée de créer une fonction js que j'appelle au click du bouton, question de m'assurer que la variable est récupérable. J'arrive donc à la faire afficher via
Code : Tout sélectionner
alert()Je vous mets en dessous tout mon code afin de mieux vous expliquer ce que je souhaite faire. Grace à une boucle php, j'affiche dynamiquement une liste de reservations des clients. Sur chaque ligne apparait un bouton "Voir details":
Code : Tout sélectionner
<?php
$exe_r=@mysql_query($_SESSION['q_getDataReservation']) or die(mysql_error());
echo '<table id="example" class="display" cellspacing="0" width="100%">
<thead bgcolor="#FFFFFF">
<tr style="font-size:16px; color:orangered">
<th>DEBUT</th>
<th>FIN</th>
<th>ENTREPRISE</th>
<th>ESPACE</th>
<th>DETAILS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>DEBUT</th>
<th>FIN</th>
<th>ENTREPRISE</th>
<th>ESPACE</th>
<th>DETAILS</th>
</tr>
</tfoot>
<tbody>';
while(@$data_reserv=mysql_fetch_row($exe_r))
{
$bg_ligne='#FEFEF1';
switch ($data_reserv[12])
{
case 'confirme':
$stat_reserv="#E2FC6A";
break;
case 'en attente':
$stat_reserv="#6AD0FC";
break;
}
switch(substr($data_reserv[24],0,3))
{
case 'AUD':
$Tespace='AUDITORIUM';
break;
case 'BUR':
$Tespace='BUREAU';
break;
case 'SAR':
$Tespace='SALLE DE REUNION';
break;
}
echo' <tr>
<td width="15" style=" font-weight:bold; font-size:22px; font-style:normal; " align="center">'.$data_reserv[4].'</td>
<td width="15" style="font-weight:bold; font-size:22px; font-style:normal;" align="center">'.$data_reserv[5].'</td>
<td style=" font-family:"Comic Sans MS", cursive; font-size:18px; font-style:normal;"> '.$data_reserv[16].'</td>
<td style="font-weight:bold; background-color:'.@$stat_reserv.'; font-size:15px; font-style:normal;" align="center">'.$Tespace.'</td>'; ?>
<td style="background-color:#FEFEF1" align="center"><a href="#"><button onClick="javascript:getID('<?php echo $data_reserv[0] ?>');" class="popup-button" data-modal="popup">Voir les détails</button></a></td>
<?php
}
echo'</tbody>
</table>';
Ma fonction js [code]getID?>
[/code]
Par la suite s'affiche ce popup sur lequel je souhaites afficher plus de details sur la reservation, mais bien avant son apparution.
Le script du popup en question fonctionne bien sauf que j'ignore à quel moment dois-je intégrer mon script de récupération des données via sql.
Ci-dessous mon code complet.
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<?php
//connexion à jquery
if (!$sock = @fsockopen('www.google.fr', 80, $num, $error, 5))
{
echo '<link rel="stylesheet" href="../script-jquery/jquery-ui.css" type="text/css">
</head>
<script src="../script-jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">';
}
else
{
echo ' <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">';
}
//connexion à la base de données
include('../config/connexion.php');
//Activation de la page: getDataReservations
@$_SESSION['active_getDataReservations']=true;
//Initialisation de la requete de getDataReservations
if(!isset($_GET['getData']))
{
@$_SESSION['q_getDataReservation']="select *
from tbl_reservation,tbl_locataire,tbl_espace
where tbl_reservation.ID_locataire=tbl_locataire.ID_locataire and tbl_reservation.ID_espace=tbl_espace.ID_espace and tbl_reservation.Date_reservation='".date('Y-m-d')."'
";
}
?>
<title id='Description'>BAC-Planning des Réservations
</title>
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.orange.css" type="text/css" />
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.fr-FR.js"></script>
<style>
.ui-datepicker{
font-size:15px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//var AlldataTable=array();
//Types d'espaces à checker
var checkedItems = [];
var sourceTYPE = [
"AUDITORIUMS",
"BUREAUX",
"SALLES DE REUNION"
];
// Create a jqxListBox
$("#listbox").jqxListBox({width: 200, source: sourceTYPE, checkboxes: true, height: 250, theme: "orange", autoHeight:true, width: '250px'});
$("#listbox").on('checkChange', function (event) {
var items = $("#listbox").jqxListBox('getCheckedItems');
checkedItems = [];
//AlldataTable=[];
$.each(items, function (index) {
checkedItems[index]= this.index ;
});
//$("#CheckedItems").text(checkedItems);
});
$.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
changeMonth: true,
changeYear: true,
closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
prevText: '<Préc', prevStatus: 'Voir le mois précédent',
nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
currentText: 'Courant', currentStatus: 'Voir le mois courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
'Jul','Aoû','Sep','Oct','Nov','Déc'],
monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
weekHeader: 'Sm', weekStatus: '',
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
dateFormat: 'dd-mm-yy', firstDay: 0,
initStatus: 'Choisir la date', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['fr']);
$("#datepicker").datepicker({
showButtonPanel: true,
showOn: "both",
showButtonPanel: true,
onSelect: function(dateText, inst) {
//$index_rech=document.getElementById("ind_rech").value;
window.location.replace("getDataReservations.php?date_reservation="+dateText);
//alert(checkedItems.length);
},
});
});
</script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
fixedHeader: {
header: true,
footer: false
},
"bSort": false,
lengthMenu: [ [10], [10] ],
"language": {
"decimal": "",
"emptyTable": "Aucune donnée disponible",
"info": "_START_ à _END_ des _TOTAL_ reservations",
"infoEmpty": "0 à 0 sur 0 reservations",
"infoFiltered": "(Filtré sur _MAX_ domiciliés)",
"infoPostFix": "",
"thousands": ".",
"lengthMenu": "_MENU_ Reservations",
"loadingRecords": "Chargement...",
"processing": "Traitement...",
"search": "Recherche:",
"zeroRecords": "Aucun résultat trouvé",
"paginate": {
"first": "Premier",
"last": "Dernier",
"next": "Suivant",
"previous": "Précédent"
},
"aria": {
"sortAscending": ": Activer pour trier la colonne ascendante",
"sortDescending": ": Activer pour trier la colonne descendante"
}
}
} );
} );
</script>
<script type="text/javascript">
function getID(param)
{
var ID_reservation="";
ID_reservation=param;
alert(ID_reservation);
}
</script>
</head>
<body class='default'>
<div style="width:1350px; background-color:white; padding:0px; padding-top:-100px margin:0px; height:70px; border-bottom:solid; border-bottom-width:2px">
<table border="0" width="1350px" cellpadding="1" cellspacing="1" height="15">
<tr align="left" height="10">
<td rowspan="2" width="69" align="center"><img src="../images/bouton-utile/icone_calendrier.jpg" width="60" height="60"/></td>
<td width="1274" colspan="2" align="left"><h2>Planning journalier des reservations</h2></td>
</tr>
</table>
</div>
<div style="width:1330px; height:600px">
<div style="position:absolute; padding:0px; float:left; width:17%; border-right:solid; border-right-width:2px; height:600px" ><br>
<div id="listbox"></div><br>
<div id="datepicker"></div><br>
<div style="font-size: 13px; font-family: Verdana; margin-top: 10px;" id="CheckedItems"></div>
</div >
<div style="position:relative; padding:0px; float:right; width:78%; top:5px; " align="center" >
<?php
$exe_r=@mysql_query($_SESSION['q_getDataReservation']) or die(mysql_error());
echo '<table id="example" class="display" cellspacing="0" width="100%">
<thead bgcolor="#FFFFFF">
<tr style="font-size:16px; color:orangered">
<th>DEBUT</th>
<th>FIN</th>
<th>ENTREPRISE</th>
<th>ESPACE</th>
<th>DETAILS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>DEBUT</th>
<th>FIN</th>
<th>ENTREPRISE</th>
<th>ESPACE</th>
<th>DETAILS</th>
</tr>
</tfoot>
<tbody>';
while(@$data_reserv=mysql_fetch_row($exe_r))
{
$bg_ligne='#FEFEF1';
switch ($data_reserv[12])
{
case 'confirme':
$stat_reserv="#E2FC6A";
break;
case 'en attente':
$stat_reserv="#6AD0FC";
break;
}
switch(substr($data_reserv[24],0,3))
{
case 'AUD':
$Tespace='AUDITORIUM';
break;
case 'BUR':
$Tespace='BUREAU';
break;
case 'SAR':
$Tespace='SALLE DE REUNION';
break;
}
echo' <tr>
<td width="15" style=" font-weight:bold; font-size:22px; font-style:normal; " align="center">'.$data_reserv[4].'</td>
<td width="15" style="font-weight:bold; font-size:22px; font-style:normal;" align="center">'.$data_reserv[5].'</td>
<td style=" font-family:"Comic Sans MS", cursive; font-size:18px; font-style:normal;"> '.$data_reserv[16].'</td>
<td style="font-weight:bold; background-color:'.@$stat_reserv.'; font-size:15px; font-style:normal;" align="center">'.$Tespace.'</td>'; ?>
<td style="background-color:#FEFEF1" align="center"><a href="#"><button onClick="javascript:getID('<?php echo $data_reserv[0] ?>');" class="popup-button" data-modal="popup">Voir les détails</button></a></td>
<?php
}
echo'</tbody>
</table>';
?>
</div>
</div>
<div class="modal blur-effect" id="popup">
<div class="popup-content">
<h3 id="titre">Réservation N°</h3>
<div align="left">
<hr>
<h4 style="color:#F90">Date : </h4>
<h4 style="color:#F90">Plage Horaire :</h4>
<h4 style="color:#F90">Espace :</h4>
<h4 style="color:#F90">Objet :</h4>
<h4 style="color:#F90">Nombre de Participants :</h4>
<hr>
<h4 style="color:#F90">Locataire :</h4>
<h4 style="color:#F90">Responsable :</h4>
<h4 style="color:#F90">Téléphone :</h4>
<h4 style="color:#F90">Mobile :</h4>
<!--<input type="text" placeholder="Adresse email" />
<input type="submit" class="submit" value="je m'inscris" />-->
<div class="close"></div>
</div>
</div>
</div>
<div class="overlay"></div><!-- La div overlay -->
<!-- Le script qui crée la popup -->
<script src="js/popup.js"></script>
<!-- Pour l'effet blur -->
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
<script>
// this is important for IEs
var polyfilter_scriptpath = '/js/';
</script>
<script src="js/cssParser.js"></script>
<script src="js/css-filters-polyfill.js"></script>
<script type="language/javascript">
var chaine = "Hello World !";
document.write(chaine);
</script>
</body>
</html>
De ce que j'ai vu, il n'y a pas d'appel dynamique d'une page par ajax. Je pense que tu dois te renseigner sur cela afin d'appeler les données de ta base.
Internet regorge d'exemple de communication Ajax avec un serveur.
Sinon il faut avoir chargé toutes les données de toutes les pop-up possible au chargement de la page mais la viabilité de cette solution dépend du nombre de donnée à charger.
Internet regorge d'exemple de communication Ajax avec un serveur.
Sinon il faut avoir chargé toutes les données de toutes les pop-up possible au chargement de la page mais la viabilité de cette solution dépend du nombre de donnée à charger.
Spols
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube