Générer une modale via un onclick sur une div

Version imprimable

20/09/2021, 14h27
iluvthisgame

Générer une modale via un onclick sur une div

Bonjour,

Pour resituer le truc, j'ai commencé (et bientôt fini si vous me sortez de ma question :D) à dev (en mode j'ai pas touché un code depuis plus de 15 ans donc soyez indulgent :mouarf:) une appli web qui affiche un planning a partir de données d'un progiciel dont la base est en MSSQL.

Ce qu'il me reste à effectuer c'est l'affichage d'une fiche de travail quand on clique sur une div (tâche du planning) : voici le codepen d'une ébauche.

Là ou je suis en réflexion c'est que en fonction des agences je peux avoir plus d'une centaine de div (tâche du planning) à l'écran donc je me dis si je génère une div de plus cachée à chaque div que ça risque de nuire aux performance d'affichage ?? (je n'ai pas essayé)

Du coup je me suis dit : pourquoi ne pas créer une fonction qui génère cette div et l'affiche via toujours le même onclick. Mais là j'ai plus de mal à savoir par quel biais je vais faire ça !

Que feriez vous ?

iLtG
20/09/2021, 21h27
mathieu

vous pouvez par exemple utiliser javascript pour aller chercher les données au moment du clic.regardez là pour des exemples :
https://ajax.developpez.com/cours/

donc le temps de chargement de la page sera plus court mais il y a aura un petit temps d'attente après le clic.

Bonjour et merci mathieu,

Bon j'ai cheminé un peu sur le sujet et me suis aperçu que je me basais sur un id qui générait plusieurs fois le même code (donc plusieurs fois le même script jquery pour l'affichage du modal et du coup ça merdouillait sévère) J'ai donc totalement changé d'approche.

J'ai mis un <div id=modal></div> dans ma page principale puis créé une fonction php qui génère un script :
Code:

1 2 3 4 5 6 7 8 9 10 11 function modaltache($tl,$i) { echo "<script> $('#".$tl['unikId'][$i]."').click(function() { ****var url = 'modal.php'; ****$.post(url, function(data){ ********// Tu affiches le contenu dans ta div ********$('#modal').html(data); ****}); }); </script>"; }
celui ci crée donc une action pour chaque case de tâche affichée dans le planning et modifie la div #modal via la page modal.php que voici :
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 <?php session_start(); $unikid = $_SESSION['unikid']; echo "<div id=inmodal class=modal-bg> <div class=modal-wrap> <div class=taskheader><img src=https://www.monsite.fr/img/sign/logo_de_la_boite.png height=36px width=168px alt=\"LOGO\"> / FICHE DE TRAVAIL N°".$unikid."</div> <div class=taskressources> <div class=taskusers>Personnel :<br>Userlist</div> <div class=taskmatos>Matériel :<br>Listmatos</div> </div> <div class=taskclient>Client / Contact</div> <div class=taskinfos>Date / Heure / Resp / N°DEVIS</div> <div class=taskjob>Travaux à effectuer :<br>Lorem ipsum dolor</div> <div class=taskobs>Observations :<br>Lorem ipsum dolor sit amet</div> </div> </div> <script> $('#inmodal').click(function(){ $('#modal').empty() }); </script> "; ?>
Donc là j'ai bien mon modal qui fonctionne correctement pour chaque tâche cependant je pense que mon approche n'est pas bonne car je n'arrive pas encore à transmettre des données à la page modal.php via le script au moment du click (comme vous voyez ci-dessus avec mon code j'ai tenté de le faire par $_SESSION mais ça ne peut fonctionner comme je l'ai fait vu que c au moment du click qu'il faut récup l'uniqueId de la tâche) J'imagine que c'est là qu'intervient AJAX !!!

Je continue de plancher

iLtG

22/09/2021, 12h33
mathieu

ce qu'on appelle aujourd'hui "ajax" c'est la technique qui envoie une requête http en javascript sans recharger la page du navigateur. c'est ce que vous faites déjà en appelant $.post lors d'un clic.

pour passer l'identifiant lors de cet appel, vous pouvez par exemple indiquer l'identifiant dans l'objet data (https://api.jquery.com/jQuery.post/) et en php vous le récupérez dans $_POST.

Bon j'ai je pense trouvé (en tous cas ça marche)

J'ai modifié ma fonction modaltache :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function modaltache($tl,$i) {   
    echo "<script>
            $('#".$tl['unikId'][$i]."').click(function() {
 
            var uniqueid = ".$tl['unikId'][$i].";
 
            $.ajax(
            {
            url : 'modal.php',
            type : 'POST',
            data : 'unikid=' + uniqueid,
            dataType : 'html',
            success : function(data){
                $('#modal').html(data);
                }
            });
        });
        </script>";
 
}

Puis mon modal.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    $unikid = $_POST['unikid'];
    echo "<div id=inmodal class=modal-bg>
    <div class=modal-wrap>
        <div class=taskheader><img src=https://www.monsite.fr/img/sign/logo_de_la_boite.png height=36px width=168px alt=\"LOGO\"> / FICHE DE TRAVAIL N°".$unikid."</div>
        <div class=taskressources>
            <div class=taskusers>Personnel :<br>Userlist</div>
            <div class=taskmatos>Matériel :<br>Listmatos</div>
        </div>
        <div class=taskclient>Client / Contact</div>
        <div class=taskinfos>Date / Heure / Resp / N°DEVIS</div>
        <div class=taskjob>Travaux à effectuer :<br>Lorem ipsum dolor</div>
        <div class=taskobs>Observations :<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>
<script>
$('#inmodal').click(function(){
    $('#modal').empty() 
 });
</script>
";

Et du coup je récupère bien mon ID de tâche.

Merci encore de l'aiguillage

iLtG

22/09/2021, 13h34
mathieu

vous appelez la fonction php "modaltache" pour chaque tâche ?