Forum : Afficher table en php après onclick js

Bonjour,

Je souhaite afficher les données d'une table apres avoir la fonction onlick en JS.
Enfaite j'ai un svg avec des zones cliquable (path avec id), lorque je clique sur une zone le nom de la zone s'affiche avec l'id du span.
Je souhaite afficher des données d'une table qui correspond a l'id de la zone selectionnées.
Je me demande si c'est possible de faire ça sans ajax ou xmlhttprequest si pas le choix avec, mais je n'est pas de formulaire.
Le tout est sur la meme page.
pour info j'integre le svg avec include.

Voici une partie du html et php

<!-- Reservations -->
        <div id="reservations" class="tab-pane active">
            <!-- début svg -->
            <div class="alveoles">  
                <?php include ('Resa/plan_alveoles.svg'); ?>
            </div>
            <!-- finsvg -->
            <!-- popover -->
            <div class="infos">
                <span id="infoAlveole"></span><br>
                <td><?php echo $compteresa->nombre?>Réservations</td>
                <?php while($listinscrit = $stmt->fetch(PDO::FETCH_OBJ)) {?>
                    <td><?php echo $listinscrit->nom;  echo $listinscrit->prenom;?></td>
                <?php } ?>
            </div>
            <div id="buttonResa">
                <button title="Séléctionner alvéole" class="btn btn-info " type="button" onclick="resaAlveole();">Séléctionner</button><br><br>
            </div>
        </div>

Voici un partie du JS:

<script>
        $(function selectAlv(){
            $('[id*=alveole_').on('click', function(){          
                let alveole = $(this);
                let alveoleId = $(this)["0"].id;            
                let allAlveole = $('[id*=alveole_');            

            allAlveole.css('fill','#1e1e1e');
            alveole.css('fill', '#f5c6cb');

            alveoleId = alveoleId.replace('_',' ');
            $('#infoAlveole').text(alveoleId);          
            console.log(alveoleId);
        });
        })
    </script>

Voici une patie su svg pour l'exemple d'une zone path:

Merci d'avance.

2 réponses

Nesyou75,

il y a 5 ans

Hello et merci c'est une bonne idée.

Voici ceque j'ai fait:
Par contre je ne sais pas comment je peux faire disparaitre la div affichée apres click, lorsque je click sur une autre div, du coup je me retrouve avec plusieurs div affichée, mais je veux que seul la div cliqué apparaisse la div précedente clique disparaisse.

la partie JS:

$(function selectAlv(){
$('[id*=alveole_').on('click', function(){          
let alveole = $(this);  
let alveoleId = $(this)["0"].id;
let allAlveole = $('[id*=alveole_');

let alveoleAll = $('.infoalv*');
let alveole1 = $('.infoalv1');
let alveole2 = $('.infoalv2');
let alveole3 = $('.infoalv3');
let alveole4 = $('.infoalv4');
let alveole5 = $('.infoalv5');

alveoleId = alveoleId.replace('_',' ');
// alveoleId = alveoleId.toUpperCase();

$('#infoAlveole').text(alveoleId);

if (alveoleId == 'alveole 1') {
    allAlveole.css('fill','#1e1e1e');
    allAlveole.css('stroke', '#ffffff');
    alveole.css('fill', '#f5c6cb');
    alveole.css('stroke', '#000');
    alveole1.removeClass("infoalv1");

    alveole2.addClass("infoalv2");
    alveole3.addClass("infoalv3");
    alveole4.addClass("infoalv4");
    alveole5.addClass("infoalv5");
} 

if (alveoleId == 'alveole 2') {

    allAlveole.css('fill','#1e1e1e');
    allAlveole.css('stroke', '#ffffff');
    alveole.css('fill', '#ffeeba');
    alveole.css('stroke', '#000');
    alveole2.removeClass("infoalv2");

    alveole1.addClass("infoalv1");
    alveole3.addClass("infoalv3");
    alveole4.addClass("infoalv4");
    alveole5.addClass("infoalv5");

La partie html

<div id="showresa1"class="infoalv1 infoalv1bull1">
le php est ici

et la partie css

          .infoalv1{
      display: none;
  }

  .infoalv1bull1{
      background:rgb(245, 198, 203);
      color:#000;
      padding:7px 15px;
      border-radius:5px;
      max-width:500px;
      list-style: url('/images/Icon_header2.ico');
      margin: 0 auto;
  }

  .infoalv1bull1::after{
      content:""; 
      border-left:20px solid transparent;
      border-right:20px solid transparent;
      border-top: 20px solid rgb(245, 198, 203);
      position: absolute;
  }

  /*alveole2*/

  .infoalv2{
      display: none;
  }

  .infoalv1bull2{
      background:#ffeeba;
      color:#000;
      padding:7px 15px;
      border-radius:5px;
      max-width:500px;
      list-style: url('/images/Icon_header2.ico');
      margin: 0 auto;
  }

  .infoalv1bull2::after{
      content:""; 
      border-left:20px solid transparent;
      border-right:20px solid transparent;
      border-top: 20px solid #ffeeba;
      position: absolute;
  }

Merci.

Nesyou75,

il y a 5 ans

Hello lolo,
ça fonctionne merci.