modal bootstrap

Asked

Viewed 582 times

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">&times;</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 -->&#xA;<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">&#xA; Launch demo modal&#xA;</button>. As documented: http://getbootstrap.com/javascript/#modals

  • 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>

  • 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?

  • 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> .

  • 1

    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.

  • I got it! I think the problem is that I was calling CSS first. I switched positions and it worked perfectly! obg!

  • 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 :)

  • @Rafaelacioly if possible, publish (as a response) the solution, explaining how you did to solve.

  • can you give me an example ? like this http://jsfiddle.net/3okrLm05/?

  • @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).

  • @Rafaelwithoeft I was trying to help and not with doubt.

  • @Gabrielrodrigues Right, sorry, by the "way" of your comment seemed a doubt.

Show 7 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.