Run mysql search after opening Modal

Question

Run mysql search after opening Modal

Navigation

#1 by (1 votes)

2

Galera, yesterday with the help of Bruno here on the page I managed to solve my problem of creating the modal, but today I have a new difficulty that I could not get over.

Next to my modal opening with the opening through the normal click. But what I need is to 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_search'). 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 you can send the input type="date" and the page search_report.php shows my report according to my search in mysql based on the date passed.

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

How can I do (Probably via Ajax) to only load within the div the SQL response after sending the input and return page search_report.php?

I tried to create some Ajax functions (which I still do not handle very well but I'm trying to kkkk) to do a refresh when I click the fetch button, or try to do it out of document.ready but then neither does the modal open.

I was really stuck in this.

I love you.

php mysql jquery ajax bootstrap

asked by anonymous 03.08.2017 / 03:17

1 answer

Android calendar with events How to create a 2d animation as if it were a video, vignette or cutscene [closed]

score 1 · Answer 1

Rafael,

You can use jQuery's .submit () function 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 script below does is only when your form is "submitted" is that it will call AJAX to run PHP, so it will not execute when the page loads.

.submit will replace your $('#btn_buscar').click( function(){... , so 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
});