1

Comecei a usar AJAX há um tempinho e estou com uma dúvida. Possuo um <select> e estou tentando trazer o valor dele na mesma página (sem dar refresh), porém, só é exibido o valor quando eu clico no <select> novamente, para selecionar outra opção. Como faria para mostrar assim que eu selecionasse?

Vamos supor que eu seleciono o <select> com value="4", só é mostrado o "4", quando eu clico no <select> de novo...

index.php:

<select class="common_selector" id="ordenar_tabela">
     <option value="1">Lançamentos</option>
     <option value="2">Menor valor</option>
     <option value="3">Maior valor</option>
     <option value="4">A - Z</option>
     <option value="5">Z - A</option>
</select>

<script>
$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        var action = 'fetch_data'; 
        var ordenacao = $('#ordenar_tabela').val();

        $.ajax({
            url:"verificar.php",
            method:"POST",
            data:{action:action, ordenacao:ordenacao},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }

    $('.common_selector').click(function(){
        filter_data();
    });

});
</script>

verificar.php:

<?php
          $query = "SELECT * FROM produtos_estoque";
            
          // Se o usuário quiser ordenar a tabela...
          if(isset($_POST["ordenacao"])){
        
          $ordenacao = $_POST["ordenacao"];
          echo $ordenacao; //Estou exibindo essa variavel na página, para ver se vai funcionar os demais códigos abaixo...
        
          // $query .= ($ordenacao == 1) ? " ORDER BY ID_produtos DESC" : "";
          // $query .= ($ordenacao == 2) ? " ORDER BY ID_produtos DESC" : "";
          // $query .= ($ordenacao == 3) ? " ORDER BY ID_produtos DESC" : "";
          // $query .= ($ordenacao == 4) ? ' ORDER BY produto' : "";
          // $query .= ($ordenacao == 5) ? ' ORDER BY produto DESC' : "";
        }
?>
1
  • Vou editar mostrando a $query, $('.filter_data') apenas não foi inserido na questão. 10/11/2020 às 18:29

1 Resposta 1

-1

Seu problema está acontecendo pois você chama a função filter_data() quando o <select> é clicado.

Veja como chamar a função ao selecionar uma nova opção, utilizando o atributo onchange:

<select class="common_selector" id="ordenar_tabela" onchange="filter_data()">
    <option value="1">Lançamentos</option>
    <option value="2">Menor valor</option>
    <option value="3">Maior valor</option>
    <option value="4">A - Z</option>
    <option value="5">Z - A</option>
</select>
function filter_data()
{
    var action = 'fetch_data'; 
    var ordenacao = $('#ordenar_tabela').val();

    $.ajax({
        url:"verificar.php",
        method:"POST",
        data:{action:action, ordenacao:ordenacao},
        success:function(data){
            $('.filter_data').html(data);
        }
    });
}

Outra opção, mantendo o HTML intacto e utilizando jQuery:

<select class="common_selector" id="ordenar_tabela">
    <option value="1">Lançamentos</option>
    <option value="2">Menor valor</option>
    <option value="3">Maior valor</option>
    <option value="4">A - Z</option>
    <option value="5">Z - A</option>
</select>
function filter_data()
{
    var action = 'fetch_data'; 
    var ordenacao = $('#ordenar_tabela').val();

    $.ajax({
        url:"verificar.php",
        method:"POST",
        data:{action:action, ordenacao:ordenacao},
        success:function(data){
            $('.filter_data').html(data);
        }
    });
}

$(".common_selector").change(function() {
  filter_data();
});
7
  • Dei uma editada na pergunta, irei usar o value desse <select> em uma condição em PHP, assim, mudando a consulta da minha página. 10/11/2020 às 18:41
  • No verificar.php você está devolvendo o valor do POST, ou seja, o valor enviado. O código continua redundante. Caso deseje retornar os valores da query, é uma questão sobre SQL, não AJAX. Por favor, reformule sua questão para clarificar seu objetivo.
    – Brhaka
    10/11/2020 às 18:45
  • Teoricamente está funcionando, estou recebendo os valores e está sendo exibido corretamente. O problema, é que só está exibindo, quando eu clico no <select> novamente, creio que isso seja como eu estou pegando o valor com AJAX... 10/11/2020 às 18:47
  • Certo. Vou reformular a resposta.
    – Brhaka
    10/11/2020 às 18:50
  • Infelizmente, não funcionou, não vi nenhuma alteração... 10/11/2020 às 19:10

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 .