Remplir un Modal avec données d'une BDD
Résolu
emrh
Messages postés
427
Date d'inscription
Statut
Membre
Dernière intervention
-
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Au clic sur l'icone d'une facture, j'aimerai faire apparaître un modal animé verticalement contenant les informations de cette facture. Je voudrai savoir si c'est possible de faire ça alors que les données de cette facture ne sont pas encore chargées sur la page php contenant le modal ?
Voici mon code, j’aimerai savoir si je suis sur la bonne voie et je ne suis pas contre un petit coup de pouce car je suis bloqué !
Tout d'abord l'icône d'appel et le Modal correspondant :
client-fiche.php
La page externe PHP qui doit être appelée par la Javascript :
facture-visualiser.php
(Cette partie ne pose pas de problème puisqu'elle fonctionne en autonome)
Et enfin, la partie qui me pose le plus de problème car je panne pas grand chose en JavaScript :
(Même page que le Modal évidement)
client-fiche.php
Merci d'avance pour vos aides précieuses !
EDIT
J'ai ajouté ça :
<script src="../js/jquery.min.js"></script>
ça va un peut mieux !
Maintenant il faut que j'arrive à construire ma facture !
Au clic sur l'icone d'une facture, j'aimerai faire apparaître un modal animé verticalement contenant les informations de cette facture. Je voudrai savoir si c'est possible de faire ça alors que les données de cette facture ne sont pas encore chargées sur la page php contenant le modal ?
Voici mon code, j’aimerai savoir si je suis sur la bonne voie et je ne suis pas contre un petit coup de pouce car je suis bloqué !
Tout d'abord l'icône d'appel et le Modal correspondant :
client-fiche.php
<td class="td-centre"> <input type="image" class="td-icone" id="FactBtn" src="img/loupe.png" value="<?php echo $data_facture['facture'];?>" onclick="FactModal(this)" alt="Visualiser cette facture" title="Visualiser cette facture"> </td> .../... <!-- M O D A L F A C T --> <div id="FactModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close2">×</span> <h2>FACTURE N°<span id="IdFact"></span></h2> </div> <div class="facture-body"> </div> </div> </div>
La page externe PHP qui doit être appelée par la Javascript :
facture-visualiser.php
(Cette partie ne pose pas de problème puisqu'elle fonctionne en autonome)
<?php if (isset($_POST['fact']) && ($_POST['fact'] != '')) { // On se connecte à la base de données : require ("connexion.php"); // On récupère l'entête de la facture : $req_entete = $bdd->prepare(' SELECT contrats.* FROM contrats WHERE contrats.facture = :fact'); $req_entete->execute(array( 'facture' => $_GET['fact'] )); $data_entete = $req_entete->fetch(); // On récupère le contenu des contrats qui composent la facture : $req_facture = $bdd->prepare(' SELECT contenu.type, contenu.designation, contenu.descriptif, contenu.prix, contenu.quantites FROM ( SELECT contrats.*, batiments.designation AS type, prestations.designation, compositions.descriptif, compositions.prix, compositions.quantites FROM compositions INNER JOIN prestations ON prestations.id_prestation = compositions.id_prestation INNER JOIN contrats ON contrats.id_contrat = compositions.id_contrat INNER JOIN batiments ON batiments.id_batiment = contrats.id_batiment) AS contenu WHERE contenu.facture = :facture'); $req_facture->execute(array( 'facture' => $_GET['fact'] )); // On va chercher tous les règlements dans la table acomptes de cette facture : $req_acomptes = $bdd->prepare('SELECT * FROM acomptes WHERE facture = :fact'); $req_acomptes->execute(array( 'facture' => $_GET['fact'] )); $data_acomptes = $req_acomptes->fetchAll(); //$nbre_acomptes = $req_acomptes->rowCount() ; $total = 0; $total_g = 0; $total_acptes = 0; $solde = 0; ?>
Et enfin, la partie qui me pose le plus de problème car je panne pas grand chose en JavaScript :
(Même page que le Modal évidement)
client-fiche.php
function FactModal(arg3){ var fact = arg3.value; var infoFact = document.getElementById("IdFact"); infoFact.textContent = fact; $.ajax({ type:'POST', url:'facture-visualiser.php', data:'fact='+ContratType, success:function(html){ $('#facture-body').html(' ???????????????????'); } }); var modal = document.getElementById("FactModal"); var span = document.getElementsByClassName("close2")[0]; modal.style.display = "block"; span.onclick = function(){ modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } }
Merci d'avance pour vos aides précieuses !
EDIT
J'ai ajouté ça :
<script src="../js/jquery.min.js"></script>
ça va un peut mieux !
Maintenant il faut que j'arrive à construire ma facture !
Configuration: Linux / Chrome 101.0.4951.64
A voir également:
- Remplir un Modal avec données d'une BDD
- Fuite données maif - Guide
- Organigramme a remplir word - Guide
- Supprimer les données de navigation - Guide
- Trier des données excel - Guide
- Comment remplir un document pdf - Guide
3 réponses
Bon j'ai changé qq trucs pour avoir un début de qq chose :
1. J'ai déjà mis des $_POST dans ma page externe pour être cohérent avec l'appel AJAX
2. J'ai également remplacé class="facture-body" par id="facture-body" pour pouvoir exploiter
le retour d'ajax :
$.ajax({
type:'POST',
url:'facture-visualiser.php',
data:'fact='+fact,
success:function(html){
$('#facture-body').html('ICI LA FACTURE A CONSTRUIRE');
}
});
1. J'ai déjà mis des $_POST dans ma page externe pour être cohérent avec l'appel AJAX
2. J'ai également remplacé class="facture-body" par id="facture-body" pour pouvoir exploiter
le retour d'ajax :
$.ajax({
type:'POST',
url:'facture-visualiser.php',
data:'fact='+fact,
success:function(html){
$('#facture-body').html('ICI LA FACTURE A CONSTRUIRE');
}
});
Merci Jordan pour cette précision...
Je commence effectivement à obtenir quelque chose dans mon modal.
J'ai opté pour le html généré dans le PHP car je suis un peu plus à l'aise avec...
maintenant il faut construire du html avec du php !
J'ai un autre problème.... J'ai réussi à passer à la page externe le n° de la
facture, mais je dois passer un autre paramètre, le n° du client !
Je sais faire ça dans une URL mais dans Java je ne sais pas ?
Comment je peux faire ?
Je commence effectivement à obtenir quelque chose dans mon modal.
J'ai opté pour le html généré dans le PHP car je suis un peu plus à l'aise avec...
maintenant il faut construire du html avec du php !
J'ai un autre problème.... J'ai réussi à passer à la page externe le n° de la
facture, mais je dois passer un autre paramètre, le n° du client !
Je sais faire ça dans une URL mais dans Java je ne sais pas ?
Comment je peux faire ?
function FactModal(arg3){ var FactClient = arg3.value; var infoFact = document.getElementById("IdFact"); infoFact.textContent = FactClient; $.ajax({ type:'POST', url:'facture-visualiser.php', data:'FactClient='+FactClient, success:function(html){ $('#facture-body').html(html); } }); var modal = document.getElementById("FactModal"); var span = document.getElementsByClassName("close2")[0]; modal.style.display = "block"; span.onclick = function(){ modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } }
Bonjour,
Utilise un objet pour les paramètres post, regarde le premier exemple de la doc :
https://api.jquery.com/jQuery.ajax/#example-0
Utilise un objet pour les paramètres post, regarde le premier exemple de la doc :
https://api.jquery.com/jQuery.ajax/#example-0
Soit tu génères le html dans ton code php , soit tu le génères au niveau du JS .
Dans les deux cas, pour transmettre les données de ton php vers ton ajax, il faut mettre un echo à la fin de celui ci avec les données que tu veux traiter.