Open Modal with Mysql output

Question

What about the guys? I am studying Dev Web and creating a pro trampo system with customer registration and reports.

Let’s have the doubt. I have a report page and there I have an input type="date" inside a form that will do the search from a date in the database:

        <!-- BUSCA CALENDARIO -->        
        <div class="col-sm-offset-4 col-sm-4">
        <!-- Input ao qual foi designado a função para exibir o calendário, que vai ser selecionado com jquery na função abaixo. -->
            <input type="date" id="busca_data" name="busca_data" placeholder="data" class="form-control">
        </div>
        <button class="btn btn-info" id="btn_buscar" type="submit">Buscar</button>

The file I sent this post is the.php search report that has this code:

$id_usuario = $_SESSION['id_usuario'];
$empresa_logada = $_SESSION['empresa']; 
$busca_data = $data = str_replace("/", "-", $_POST['busca_data']);

$objDb = new db();
$link = $objDb->conecta_mysql();

$sql = " SELECT DATE_FORMAT(s.data_relatorio, '%d %b %Y') ";
$sql.= " AS data_relatorio_formatada, s.relatorio, u.usuario FROM relatorios AS s JOIN usuarios AS u ON ";
$sql.= " (s.id_usuario = u.id) WHERE nivel = 3 AND s.empresa = '$empresa_logada' ";
$sql.= " ORDER BY data_relatorio DESC ";


$resultado_id = mysqli_query($link, $sql);

if($resultado_id){

    while ($registro = mysqli_fetch_array($resultado_id, MYSQLI_ASSOC)){            
        $relatorios = $registro;
        echo '<pre>'.$registro['relatorio'].'</pre>';

    }

} else {
    echo 'Erro na consulta de tweets no banco de dados!';
}

This echo $record['report'] was a test I was doing.

Well what I’m not able to do is open a Modal within the Reports page where only this result of the database comes. I imagine I need to do this via Ajax but in my code I couldn’t even open the modal. There I have already created a function after Document.ready to load this report but it only works by taking me to another page.

What I have done via jquery is this:

$('#btn_buscar').click( function(){                 
                $.ajax({
                    url:'busca_relatorio.php',
                    method: 'post',
                    data: $('#resultado_busca').serialize(),
                    sucess: function(data){                         
                        $('#resultado_busca').val('');
                    }
                });
            });

There at the end of my page includes a div to show this:

<div class="panel-body" id="resultado_busca"></div>

But I just wanted to show this result inside a modal. Can anyone help me with this headache? kkkk

Thank you guys.

Answer 1

From what I understand, you are using Bootstrap, following this side, add the following code in your HTML of the page where AJAX is loaded:

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div id="resultado_busca">...</div>
</div>

Inside your Ajax’s Success add:

$('#resultado_busca').html(data); // data é o valor printado do lado php
$('#exampleModalLong').modal('show') ; // abre o modal via jquery

Just one remark: Success is with two C’s and two S’s

EDIT This is the documentation of the modal on the Bootstrap website, worth taking a look too: https://v4-alpha.getbootstrap.com/components/modal/