Run Mysql search after opening Modal

Question

Guys, yesterday with the help of Bruno here on the page I managed to solve my need to create the modal but today I have a new difficulty, I could not pass over.

Next with my modal opening through the normal click. But what I need is, send via POST the date that is in an input type="date"

<form method="post" action="busca_relatorio.php" class="panel-heading">                         
    <!-- BUSCA CALENDARIO -->        
    <div class="col-sm-offset-4 col-sm-4">                  
       <input type="date" id="busca_data" name="busca_data" placeholder="data" class="form-control">
    </div>                  
    <button class="btn btn-info" type="button">Buscar</button>                       
</form>

And I have my modal window:

<div  class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog">                      
        <!-- Modal content-->
           <div class="modal-content">
               <div class="modal-header" style="padding:35px 50px;">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4><span class="glyphicon glyphicon-file"></span>Relatórios</h4>
                </div>
                <div class="modal-body" style="padding:40px 50px;">
                    <div id="resultado_busca">...</div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Fechar</button>       
                </div>
            </div>                        
        </div>
    </div> 

And here I have my ajax code $('#btn_fetch'). click( Function(){

$.ajax({
    url:'busca_relatorio.php',
    method: 'post',
    data: $('#resultado_busca').serialize(),
    success: function(data){                        
        $('#resultado_busca').html(data); // data é o valor printado do lado php
        $('#exampleModalLong').modal('show') ; // abre o modal via jquery
        }
    });                     
});

If I put the can do input type="date" and on the page search.php shows my report according to my search in mysql based on the last date.

But if I change to button type="button" to not change page and open in the modal window, it already comes with my div loaded from the beginning, before making the request through Date, and I get an error saying that the search date is not yet defined.

How can I do (probably via Ajax) to only load into the div the SQL response after sending the input and returning the.php.php.php.?

I tried to create some Ajax functions (which I still don’t know very well but I try to kkkk) to do a refresh when I click the search button, or try to do outside of Ocument.ready but then the modal won’t open.

I got really caught up in this.

Hug.

Answer 1

Rafael,

You can use the function .Submit() jQuery to prevent redirection from being done. This way

$('#id_do_seu_form').submit(function(e){
  e.preventDefault();
  return false; // nao ira para lugar algum 
});

EDIT

What the following script does is only when your form is "submited" it will call AJAX to run PHP, so it will not run when the page is loaded.

The .submit will replace your $('#btn_buscar').click( function(){..., then you can comment on it in your code.

HTML:

<form method="post" class="panel-heading">                         
    <!-- BUSCA CALENDARIO -->        
    <div class="col-sm-offset-4 col-sm-4">                  
       <input type="date" id="busca_data" name="busca_data" placeholder="data" class="form-control">
    </div>                  
    <button class="btn btn-info" type="button">Buscar</button>                       
</form>

JS:

$('#id_do_seu_form').submit(function(e){
  e.preventDefault();
  $.ajax({
    url:'busca_relatorio.php',
    method: 'post',
    data: { busca_data: $('#busca_data').val()}, // sua data chegará como $_POST['busca_data'] no PHP.
    success: function(data){                      
        $('#resultado_busca').html(data); // data é o valor printado do lado php
        $('#exampleModalLong').modal('show') ; // abre o modal via jquery
     }
    });                     
  });
  return false; //não vai redirecionar a lugar algum
});