Remplir un Modal avec données d'une BDD

Résolu/Fermé
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - Modifié le 25 mai 2022 à 17:02
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 25 mai 2022 à 22:00
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
<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

3 réponses

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
25 mai 2022 à 17:09
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');

}
});
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 mai 2022 à 19:01
Bonjour,

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.
1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
25 mai 2022 à 20:20
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 ?

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";
        }
      }
    }

0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
25 mai 2022 à 21:49
Bonjour,

Utilise un objet pour les paramètres post, regarde le premier exemple de la doc :
https://api.jquery.com/jQuery.ajax/#example-0
1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
25 mai 2022 à 22:00
Top, merci Pitet !
Merci également à Jordan !
0