IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut 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 ) à dev (en mode j'ai pas touché un code depuis plus de 15 ans donc soyez indulgent ) 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

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 435
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 435
    Points : 13 071
    Points
    13 071
    Par défaut
    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.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 435
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 435
    Points : 13 071
    Points
    13 071
    Par défaut
    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.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Bon j'ai je pense trouvé (en tous cas ça marche)

    J'ai modifié ma fonction modaltache :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 435
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 435
    Points : 13 071
    Points
    13 071
    Par défaut
    vous appelez la fonction php "modaltache" pour chaque tâche ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 01/02/2010, 10h07
  2. Onclick sur un div sauf sur les div enfants
    Par Roromix dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 28/02/2009, 18h13
  3. générer une div en haut d'un site
    Par pas30 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 02/02/2009, 08h13
  4. onClick sur deux div superposés
    Par sourivore dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 03/09/2008, 09h27
  5. syntaxe onclick sur un div
    Par clara1 dans le forum Général JavaScript
    Réponses: 40
    Dernier message: 16/05/2008, 10h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo