Problème MODAL BOOTSTRAP / PHP
Jérôme VICENTE
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.