Make the result of a table appear in AJAX

Question

I am making a div with form to be hidden, and using AJAX for when it is clicked on the search button div is visible, and brings the result of the database in PHP. Only that I just can’t put my chunk of the table div to be shown in AJAX...the logic of the code is.. I have combobox that is visible, when selecting the value 'Boletos' it shows the div1, selecting a value in the div1 and clicking the search button it remained visible and should bring the result of the table div...my code is like this:

$(document).ready(function() {
    $('#div1').hide();
    $('#comboBox').change(function() {
        if ($('#comboBox').val() == 'Boletos') {
            $('#div1').show();
            acao = '#form_1';
            form = '#div1';
            }
            $(document).on('click', '.botao', function(e){
        e.preventDefault();
        $.ajax({
            url: acao,
            type: "post",
            data: $(form).serialize(),
            complete: function (response) {

            //AQUI ela deveria trazer a minha div TABELA com o resultado do banco
                $('#tabela').html(Visibility='visible');
                 $('#div1').show();
            },
            error: function () {
                $('#tabela').html('Erro, não há resultados');
            },
        });
    });
});

My POST method is to do the whole process on this same page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<select id="comboBox" name="comboBox">
    <option>Selecione sua opção aqui</option>
    <option value='Boletos'>Boletos</option>
    <option value='Folhas'>Folhas</option>
    <option value='Guias'>Guias</option>
</select>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" id="form_1" method="POST">
    <div id="#div1">
        <select id="combo1" name="combo1">
            <option>Selecione sua opção aqui</option>
            <option value='Pagamento 1'>Pagamento 1</option>
            <option value='Pagamento 2'>Pagamento 2</option>
        </select>
        <button type="submit" class="botao" id="btn1" value="btn1">Buscar</button>
    </div>
</form>

And here my div TABLE, which should be showing her result in AJAX:

<div id="tabela" class="table table-responsive">       
          <table class="nome>       
           <thead>
            <tr>  
              <td><center>Protocolo</center></td>

              <td><center>Boleto</center></td>

              <td><center>Categoria</center></td>

              </tr>
            </thead>
            <tbody>
               <?php
                include "conexao.php";
                ini_set('max_execution_time', 600); 
                $categoria = $_POST['combo1'];
                $stmt = $db->prepare("select protocolo,nomeBoleto,categoria,hr_dt_inserido from boletos WHERE categoria=$categoria");
                $stmt->execute();
                while($row = $stmt->fetch()){
                  if($row > 0){ 
                ?>
                <tr>                
                  <td><?php echo $row['protocolo']?></td>
                  <td><?php echo $row['nomeBoleto']?></td>
                  <td><?php echo $row['categoria']?></td>
                </tr>
                <?php
                  }
                  else{
                    echo "Não exitem Boletos a serem exibidos";
                  }
                }
                ?>
            </tbody>
           </table>
        </div>

I tested everything is working the only thing I need is in this excerpt of AJAX code I need to bring the result of my table div, which instead brings the word 'Visible':

complete: Function (Sponse) {

    //AQUI ela deveria trazer a minha div TABELA com o resultado do banco
        $('#tabela').html(Visibility='visible');
         $('#div1').show();
    },

Answer 1

Simply insert the AJAX Sponse into the div#div1:

$('#div1')
.html(response) // insere o HTML vindo do AJAX
.show(); // exibe a div

You don’t need .empty() or .append(), for the .html() already replaces all HTML inside the div.

In the error: the same thing:

error: function () {
   $('#div1')
  .html('Erro, não há resultados')
  .show();
},

But you need to separate the two handlers Events, and not place the click event inside the change event, otherwise it will multiply the click on the button each time the change event is triggered.

In this case it is necessary to declare the variables acao and form out of the handlers and put a if in AJAX so that it is only called if these two variables have values.

It seems to me that the $('#div1').show(); inside the change is unnecessary, since the div will be displayed in the AJAX Sponse.

Another thing is that you are assigning the form by the id in the variable acao, then should pull the value of action and put in the url of AJAX with $(acao).attr("action"), and the #div_1 in the variable form.

The code should look like this:

$(document).ready(function() {

   var acao, form;
   $('#div1').hide();
   $('#comboBox').change(function() {
      if ($(this).val() == 'Boletos') {
         // $('#div1').show(); essa linha me parece desnecessária!
         acao = '#form_1';
         form = '#div1';
      }
   });

   $(document).on('click', '.botao', function(e){
      e.preventDefault();
      if(acao && form){
         $.ajax({
            url: $(acao).attr("action"),
            type: "post",
            data: $(acao).serialize(),
            complete: function (response) {
               $(form)
               .html(response)
               .show();
            },
            error: function () {
               $(form)
               .html('Erro, não há resultados')
               .show();
            },
         });
      }
   });
});

Answer 2

You need to indicate where your reply should be displayed

$(document).ready(function() {
    $('#div1').hide();
    $('#comboBox').change(function() {
        if ($('#comboBox').val() == 'Boletos') {
            $('#div1').show();
            acao = '#form_1';
            form = '#div1';
            }
            $(document).on('click', '.botao', function(e){
        e.preventDefault();
        $.ajax({
            url: acao,
            type: "post",
            data: $(form).serialize(),
            complete: function (response) {

                 $('#div1').empty();
                 $('#div1').append(response);
                 $('#div1').show();
            },
            error: function () {
                $('#tabela').html('Erro, não há resultados');
            },
        });
    });
});

in this case I used #div1 itself to display the table, but first cleaned it with the .empty().