Charging information within the modal (bootstrap 3.3.6)? - php

Question

I have a modal and after clicking on the Visualizar option I want it to load information from a table.
However, it only loads the first table ID, regardless of which item of the table I want to view. It always shows the same information.
Below is the code I'm using.
<div class="container-fluid">
<table class="table table-striped" data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-columns="true">
<thead>
<tr>
<th class="th-small" data-align="left" data-sortable="true">ID</th>
<th data-align="left" data-sortable="true">Nome</th>
<th class="th-small">Ações</th>
</tr>
</thead>
<tbody>
<?php
foreach ($idade as $key => $v) {
?>
<tr>
<td><?= $v->id ?></td>
<td><?= $v->titulo ?></td>
<td>
<form data-toggle="validator" method="POST" enctype="multipart/form-data">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
<ul class="table-modal dropdown-menu">
<li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
<li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
</ul>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- Modal VISUALIZAR -->
<div class="modal fade" id="modal-select" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="cadastroIdadelLabel">Visualizar - Idade</h4>
</div>
<div class="modal-body">
<form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
<fieldset>
<div class="form-group">
<div>
<label>Idade:</label>
<?= $v->titulo ?>
</div>
<div>
<label>Código:</label>
<?= $v->id ?>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
</div>
</form>
</div>
</div>
</div>
Could anyone help me find the issue?

Answer 1

First, you have open <form> tag inside foreach code (Sidenote: He doesn't need a form here)
<?php foreach ($idade as $key => $v) {?>
<tr>
<td><?= $v->id ?></td>
<td><?= $v->titulo ?></td>
<td>
<form data-toggle="validator" method="POST" enctype="multipart/form-data">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
<ul class="table-modal dropdown-menu">
<li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
<li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
</ul>
</div>
</form>
</td>
</tr>
<?php } ?>
Second you have to put <form> tag before modal-body inside Modal (sidenote: <?= $v->titulo ?> and <?= $v->id ?> will not show any value outside foreach
<div class="modal fade" id="modal-select" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="cadastroIdadelLabel">Visualizar - Idade</h4>
</div>
<form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
<div class="modal-body">
<fieldset>
<div class="form-group">
<div>
<label>Idade:</label>
<?= $v->titulo ?>
</div>
<div>
<label>Código:</label>
<?= $v->id ?>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
</div>
</form>
</div>
</div>
</div>
Third you have to add the id <?= $v->id ?> as data attribute data-id="<?= $v->id ?>" to modal trigger button and with BS Modal event, pass it to modal when modal shown
<li class=""><a data-id="<?= $v->id ?>" data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
Modal show event.
$(document).ready(function(){
$('#modal-select').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
//pass `id` to input, HTML selector do what ever you like with it
});
});
Fourth, To fetch data against id from database and show in modal, have a look at this answer.
You can ask if needs more explanation or help with any step.