0

Estou fazendo com que uma div com form fique oculta, e usando o AJAX para quando for clicado no botão buscar a div fique visível, e traga o resultado do banco em PHP. Só que simplesmente não consigo colocar meu trecho da div tabela para ser mostrado no AJAX...a lógica do código é..tenho comboBox que fica visível, ao selecionar o valor 'Boletos' ela mostra a div1, selecionando um valor na div1 e clicando no botão buscar ela permanecesse visível e deveria trazer o resultado da div tabela...meu código está assim:

$(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');
            },
        });
    });
});

Meu método POST é para fazer todo o processo nesta mesma página.

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

E aqui a minha div TABELA, que deveria estar mostrando o resultado dela no 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>

Eu testei está tudo funcionando a unica coisa que preciso é neste trecho do código AJAX que preciso trazer o resultado da minha div tabela, que ao invés disso traz a palavra 'visible':

complete: function (response) {

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

2 Respostas 2

3

Basta inserir o response do AJAX na div#div1:

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

Não precisa de .empty() ou .append(), pois o .html() já substitui todo o HTML dentro da div.

No error: a mesma coisa:

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

Mas é preciso separar os dois events handlers, e não colocar o evento click dentro do evento change, senão irá multiplicar o clique no botão cada vez que o evento change for disparado.

Neste caso é preciso declarar as variáveis acao e form fora dos handlers e colocar um if no AJAX para que ele só seja chamado se essas duas variáveis tiverem valores.

Me parece que o $('#div1').show(); dentro do change é desnecessário, já que a div será exibida no response do AJAX.

Outra coisa é que você está atribuindo o form pela id na variável acao, logo deveria puxar o valor de action e colocar na url do AJAX com $(acao).attr("action"), e a #div_1 na variável form.

O código deverá ficar assim:

$(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();
            },
         });
      }
   });
});
4
  • Seu códgio funcionou, mas tenho mais duas divs invisivéis que não ficam mais invisivel..nessa parte: ' var acao, form; $('#div1').hide(); $('#div2').hide();//Essas duas divs não ficam mais inviséis $('#div3').hide();'
    – Joana
    4/06/2019 às 18:15
  • Mas na sua pergunta não existe #div2 nem #div3.
    – Sam
    4/06/2019 às 18:55
  • não coloquei pra simplificar...mas de qualquer forma mto obrigado aee..se puder ajudar agradeço..vlws
    – Joana
    4/06/2019 às 23:39
  • Oi Joana. Gostaria de ajudar sim.
    – Sam
    5/06/2019 às 12:50
0

Você precisa indicar onde sua respota deve ser exibida

$(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');
            },
        });
    });
});

neste caso se exemplo utilizei a própria #div1 para exibir a tabela, mas antes a limpeu com o .empty().

1
  • não funcionou desta forma
    – Joana
    3/06/2019 às 22:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .