1
1st doubt: I can handle variables in php + Mysql inside the modal window?
I’m trying to call a modal on my page index and it’s not working, I’ve looked for the solution and also could not find.
At the top of the page I already have one include
with the header and inside the header I’m already including the Bootstrap Javascript file.
<!-- Seleciona os dados no mysql -->
<?php
$chamada = "SELECT id, produto, pedido, status from PEDIDO";
$dados = mysqli_query($conexao, $chamada) or die(mysqli_error());
?>
<section class="news">
<div class="page-reader">
<h3>Lista de Pedidos <small>atualizado em <?= date("d/m/Y") ?></small></h3>
</div>
<table class="table table-striped">
<tr>
<td>ID</td>
<td>Produto</td>
<td>Código do Pedido</td>
<td>Situação</td>
<td>Editar Pedido</td>
<!-- Coloca os dados em um Array -->
<?php
while ($resultado = mysqli_fetch_assoc($dados)) {
?>
</tr>
<td><?= $resultado['id']; ?></td>
<td><?= $resultado['produto']; ?></td>
<td><?= $resultado['pedido']; ?></td>
<td><?= $resultado['status']; ?></td>
<td><button class="btn btn-primary" data-toggle="modal"
data-target="#myModal">Confirmar</button> <button class="btn btn-danger">Cancelar</button></td>
<?php
}
?>
</table>
</section>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Try to put a button that will call your modal, observe data-toogle=modal and data-target #myModal, the bootstrap will take care of the rest.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
</button>
. As documented: http://getbootstrap.com/javascript/#modals– Rafael Withoeft
I tried to do this but the page did not show any results. will the problem be with the inclusion of JS? am doing like this: <script src="js/bootstrap.js"></script> <script src="js/bootstrap.min.js"></script>
– RFL
Did you put content inside the modal-body div? And what kind of treatment would you like to do inside the modal? Change values, etc.? You included jquery on your page as well?
– Rafael Withoeft
The modal simply does not appear, even after placing the data-target and id with the same name it does not appear. the jquery it includes looks like this: <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> .
– RFL
Why jquery 2x inclusion? Remove a... did you add it before bootstrap? Load only a js from bootstrap too, open your console (browser) and see if there is no error... because it should be working I believe. We’ll go in pieces, then we’ll continue the editing part.
– Rafael Withoeft
I got it! I think the problem is that I was calling CSS first. I switched positions and it worked perfectly! obg!
– RFL
Now the editing part, you will have to use javascript (ajax), and send the request with the editing requests to another page... finally take a look at ajax :)
– Rafael Withoeft
@Rafaelacioly if possible, publish (as a response) the solution, explaining how you did to solve.
– Renan Gomes
can you give me an example ? like this http://jsfiddle.net/3okrLm05/?
– Gabriel Rodrigues
@Gabrielrodrigues the best would be for you to open a new question. Enter all the codes you used and the expected result (you can mention this link you used).
– Rafael Withoeft
@Rafaelwithoeft I was trying to help and not with doubt.
– Gabriel Rodrigues
@Gabrielrodrigues Right, sorry, by the "way" of your comment seemed a doubt.
– Rafael Withoeft