Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

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

$
0
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>


Viewing all articles
Browse latest Browse all 14190