Carregar dados do MySQL no PHP e inseri-los em um Bootstrap Modal.

[Doug2531 0]

Olá.

Estou desenvolvendo uma aplicação que gera estatísticas de um banco de dados enorme em MySQL.

Ao entrar, o usuário precisa escolher os filtros de sua pesquisa. Ao clicar em enviar, o PHP faz o processamento da pesquisa e terá que retornar o resultado em um Modal que deve ser carregado por javascript.

Minha dúvida é: Como eu consigo enviar os resultados da pesquisa, que vem de um arquivo php diferente, para um Modal presenta na página da pesquisa?

Tentando explicar melhor em código:

Este é um exemplo de filtro que o usuário escolhe:

                                <div class="form-group">

                                    <label>Data Inicial:</label>

                                    <input type="text" id="datepicker" name="dtInicial" class="form-control text-center"/>

                                </div>

                                <div class="form-group">

                                    <label>Data Final:</label>

                                    <input type="text" id="datepicker2" name="dtFinal" class="form-control text-center" />

                                </div>

                                <div class="form-group">

                                    <label>Tipo de Instauração:</label>

                                    <br>

                                    <select name="comboTipoInstauracao" id="comboInst" class="comboSimples">

                                        <option value="todos">Ambas</option>

                                        <option value="%lagrante">Flagrante</option>

                                        <option value="%ortaria">Portaria</option>

                                    </select>

                                </div>

                                <div class="form-group">

                                    <label>Iniciativa:</label>

                                    <br>

                                    <select name="comboIniciativa" class="comboSimples" id="comboIniciativa">

                                        <option value="Ambas">Ambas</option>

                                        <option value="Interna">Interna</option>

                                        <option value="Externa">Externa</option>

                                    </select>

                                </div>

                                <button type="submit" name="submit" onclick="Teste()">Enviar</button>

Código AJAX que envia os dados para a outra página:

            function Teste(){

                var dtInicial = document.getElementById('datepicker').value;

                var dtFinal = document.getElementById('datepicker2').value;

                var instauracao = document.getElementById('comboInst').value;

                var iniciativa = document.getElementById('comboIniciativa').value;

                $.ajax({

                    type: 'POST',

                    url: 'teste.php',

                    data: {

                        DtInicial: dtInicial,

                        dtFinal: dtFinal,

                        Instauracao: instauracao,

                        Iniciativa: iniciativa

                    }

                }).done(function (e){

                    $('#myModal').modal('show');

                });

            }

Modal que será chamado com os dados processados da classe "teste.php":

        <div id="myModal" class="modal fade" role="dialog">

          <div class="modal-dialog modal-lg">


            <!-- Modal content-->

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">×</button>

                    <h4 class="modal-title">Pesquisa Inquéritos</h4>

                </div>

                <div class="modal-body">

                    <!-- Resultado vem aqui -->

                </div>

                <div class="modal-footer">

                    <h4>Total de Registros:</h4>

                </div>

            </div>


          </div>

        </div>