Problème MODAL BOOTSTRAP / PHP

Jérôme VICENTE
Base de données MySQL
PHP

Bonjour,

je souhaite ouvrir un modal Bootstrap qui reprendra bien les données de la ligne sélectionnée d'un tableau.

ci-joint le tableau concerné :


<table id="budgetavalider" class="table table-sm" style="border-color: #1d74ca" style="background-color: #1d74ca;">
                <thead class="table-light">
                    <tr>
                        <th scope="col">Numéro Action</th>
                        <th scope="col">CFP</th>
                        <th scope="col">Intitulé</th>
                        <th scope="col">Début</th>
                        <th scope="col">Fin</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                        $budgetsavalider_query=
                        mysqli_query($conn,
                        "select * from budgetaction 
                        INNER JOIN agences ON budgetaction.agence_id=agences.agenceID 
                        INNER JOIN validation_action ON budgetaction.validation_id=validation_action.validationID 
                        INNER JOIN conseillerformationprofessionnelle on budgetaction.conseillerfp_id=conseillerformationprofessionnelle.cfpID 
                        where validation_id='2'")or die(mysqli_error());
                        while($rowbudgetsavalider=mysqli_fetch_array($budgetsavalider_query)){
                    ?>

                    <?php
                        $date = date_parse($rowbudgetsavalider['debut']);
                        $jour = $date['day'];
                        $mois = $date['month'];
                        $annee = $date['year'];

                        $numeroaction = ($rowbudgetsavalider['intitule_agence'][0]).'-'.$rowbudgetsavalider['nom_cfp'][0].$rowbudgetsavalider['prenom_cfp'][0].'-'.$annee.'-'.$rowbudgetsavalider['budgetId'];

                    ?>
                    <tr>
                      <td><?php echo $numeroaction; ?></td>
                      <td><?php echo $rowbudgetsavalider['nom_cfp']; ?></td>
                      <td><?php echo $rowbudgetsavalider['intitule_budget']; ?></td>
                      <td><?php echo $rowbudgetsavalider['debut']; ?></td>
                      <td><?php echo $rowbudgetsavalider['fin']; ?></td>
                      <td>

                          <button type="button" class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#edit<?php echo $rowbudgetsavalider['budgetId']; ?>">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
                  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
                  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"></path>
                </svg><span class="visually-hidden">Button</span>
                                </button>

                                <button class="btn btn-outline-danger btn-sm">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                  <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                </svg>
                                  <span class="visually-hidden">Button</span>
                                </button>
                              </td>
                    </tr>
                        <?php include('budget_edit_del_modal.php'); ?>
                        <?php  }  ?> 
                </tbody>
            </table>

Le modal s'ouvre bien et reprend bien les données récupérées via php et Mysql.

Par contre, autant sur la première ligne trouvée les tabs du bootstrap fonctionnent correctement.
Autant la sélection des lignes suivantes, les données sont bien reprises mais les tabs Boostrap ne fonctionnent pas....

Ci après le code du modal :

<!-- Modal -->
<div class="modal fade" id="edit<?php echo $rowbudgetsavalider['budgetId']; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <?php
      $edit=mysqli_query($conn,"select * from budgetaction where budgetId='".$rowbudgetsavalider['budgetId']."'");
      $erow=mysqli_fetch_array($edit);
    ?>

        <form method="POST" action="budgetedit.php?id=<?php echo $erow['budgetId']; ?>" enctype="multipart/form-data">

            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item" role="presentation">
                <a class="nav-link active" id="simple-tab-0" data-bs-toggle="tab" href="#simple-tabpanel-0" role="tab" aria-controls="simple-tabpanel-0" aria-selected="true">Caractéristiques</a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link" id="simple-tab-1" data-bs-toggle="tab" href="#simple-tabpanel-1" role="tab" aria-controls="simple-tabpanel-1" aria-selected="false">Tab 2</a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link" id="simple-tab-2" data-bs-toggle="tab" href="#simple-tabpanel-2" role="tab" aria-controls="simple-tabpanel-2" aria-selected="false">Tab 3</a>
              </li>
            </ul>

            <div class="tab-content pt-5" id="tab-content">
                <div class="tab-pane active" id="simple-tabpanel-0" role="tabpanel" aria-labelledby="simple-tab-0">
                    <div class="row g-2">
                        <div class="col-4">
                            <div class="mb-3">
                                  <label for="exampleFormControlInput1" class="form-label">Numéro d'action</label>
                                  <input type="text" class="form-control" id="exampleFormControlInput1" value="<?php echo $numeroaction; ?>">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="simple-tabpanel-1" role="tabpanel" aria-labelledby="simple-tab-1">Tab 2 selected</div>
                <div class="tab-pane" id="simple-tabpanel-2" role="tabpanel" aria-labelledby="simple-tab-2">Tab 3 selected</div>
            </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary">Enregistrer</button>
        </form>
      </div>
    </div>
  </div>
</div>

Auriez-vous une idée de la problématique svp ?

Merci d'avance.

2 réponses

JRcode

Hello, si je comprends bien ton code, tu crées plusieurs modals avec le include dans ta boucle.

Le problème, c’est que tu vas avoir plusieurs modals avec les mêmes classes/ID et, du coup, seule la première modal est affectée…

Il faudrait modifier les ID pour qu’ils soient vraiment uniques (tu peux concaténer une info de ta row SQL), ou bien mettre en place un script JS pour n’avoir qu’une seule modal

VCIENTE

Bonjour,

merci pour cette réponse, le problème a été résolu.