Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ronaldosdb

Como fazer consulta após selecao em combo dinamico com Jquery e passar valor para variavel php

Recommended Posts

 

 

Pessoal, boa noite

Nao sei se saberei explicar corretamente porque sao mtas duvidas, mas...

 

Tenho um select dinamico funcionando perfeitamente (

* O primeiro traz as categorias existentes [table categorias]

* O segundo as datas disponiveis para cada categoria (table datas)

* O terceiro os horarios disponiveis naquela data [table horarios]


Até ai tudo bem, estou usando Jquery e php

 

Porem, o que eu nao sei fazer é como fazer uma consulta em uma table do banco após a escolha (mudanca) no terceiro combo


Ou seja, para cada opcao selecionada no terceiro combo denominado horarios eu teria que fazer uma consulta dinamica [no arquivo consulta.php] do tipo Select * from table where categoria = 'a categoria escolhida no primeiro combo' and datas = 'data escolhida no segundo combo' e horario = 'horario escolhido no terceiro combo'

 

O resultado dessa consulta eu preciso passar para uma variavel php e printar em uma div

 

Tudo isso sem refresh

 

Ao mudar o valor do terceiro combo obviamente vai mudar o resultado desse select e, portanto, o valor printado na div

 

Como posso fazer, isso, por favor?

 

Segue abaixo como estou obtendo o valor dos combos

 

<script type="text/javascript">

	$(document).ready(function() {

	$('#pacote').on('change', function() {
        $.ajax({
            type: 'POST',
            url: 'index.hyperesources/lista_datas.php',
            dataType: 'html',
            data: {'pacote': $('#pacote').val()},
            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                $('#datas').attr('disabled', 'disabled');
                $('#datas').html('<option value="">Carregando...</option>');

                $('#horarios').html('<option value="">Data</option>');
                $('#horarios').attr('disabled', 'disabled');
            },
            // Após carregar, coloca a lista dentro do select de cidades.
            success: function(data) {
                if ($('#pacote').val() !== '') {
                    // Adiciona o retorno no campo, habilita e da foco
                    $('#datas').html('<option value="">Selecione</option>');
                    $('#datas').append(data);
                    $('#datas').removeAttr('disabled').focus();
                } else {
                    $('#datas').html('<option value="">Pacote</option>');
                    $('#datas').attr('disabled', 'disabled');

                    $('#horarios').html('<option value="">Data</option>');
                    $('#horarios').attr('disabled', 'disabled');
                }
            }
        });
    });

		
    $('#datas').on('change', function() {
        $.ajax({
            type: 'POST',
            url: 'index.hyperesources/lista_horarios.php',
            dataType: 'html',
            data: {'datas': $('#datas').val()},
            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                $('#horarios').attr('disabled', 'disabled');
                $('#horarios').html('<option value="">Carregando...</option>');
            },
            // Após carregar, coloca a lista dentro do select de bairros.
            success: function(data) {
                if ($('#datas').val() !== '') {
                    // Adiciona o retorno no campo, habilita e da foco
                    $('#horarios').html('<option value="">Selecione</option>');
                    $('#horarios').append(data);
                    $('#horarios').removeAttr('disabled').focus();
                } else {
                    $('#horarios').html('<option value="">Data</option>');
                    $('#horarios').attr('disabled', 'disabled');
                }
            }
        });
    });

	
	

	});

	
	
}

</script>

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uai, mas não é só enviar uma requisição via ajax novamente?

Se você quer esse valor depois, que guarde em uma session, ou cookie, no caso do cookie você pode criar no próprio js e, nem precisara enviar a requisição novamente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Williams, boa noite

 

Consegui enviar via post com 

 

	  $(document).ready(function(){});
function checaform(){
  var obj = $('#formulario').serialize();
  $.post('index.hyperesources/consulta.php', obj, function(res){
 console.log(data);

  })
}

Estou vendo o resultado no console do Chrome, mas só nao estou sabendo agora imprimir o resultado da consulta php dinamicamente

Ou seja, a resposta eu nao estou sabendo imprimir dinamicamente em uma div

Compartilhar este post


Link para o post
Compartilhar em outros sites

E claro, concatene os valores que vem do retorno da requisição com o HTML.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, vou dar um pitaco, tua página "index.hyperesources/lista_datas.php" está retornando uma string dos options que serão colocados no combo?

 

Pelo que eu pude entender, o elemento "#datas" é o select das datas, então a página tem que retornar uma string dos options, por exemplo "<option val=1>Val1</option><option val=2>Val2</option>", se retornar outra coisa vai bagunçar e não funcionar.

 

Outra dica, dá um "F12" no chrome e coloca um breakpoint no sucess da chamada ajax, aí da para ver o que está retornando

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Pita, sim, o combo de datas tem o identificador "datas"

 

Tenho 3 combos, um chamado pacotes, que carrega o combo datas, que por sua vez carrega o combo horarios

 

Estou conseguindo enviar o parametro desses 3 combos corretamente sem refresh para index./hyperesources/consulta.php, porem nessa tela consulta.php faco uma busca no banco com base nesses tres valore se tenho que devolver para a index o resultado dessa consulta de forma dinamica. É isso que nao estou sabendo fazer... 

 

Como faco para devolver pra index.php os dados da consulta que faco no banco?

 

Algo como esse resultado da consulta eu vou devolver na div A da tela index....

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que a sua consulta irá retornar uma tabela (<table>...</table>)

 

O que você vai precisar é na sua página ter uma div onde será colocado esta tabela de resultado.

Dentro do sucess do ajax, você irá colocar alguma coisa +/- assim:

 

$("idDivResultado").html(data);

 

Mais referencias em: 

https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

https://api.jquery.com/jquery.post/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Desculpe a ignorancia, ainda nao estou sabendo como aplicar.

 

Minha estrutura esta assim

 

1) Index.php:

Pagina que contem os combos e envia os dados sem refresh para index.hyperesources/consulta.php

<!DOCTYPE html>
<html>
  <head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>Nome Page</title>
	
	<meta name="viewport" content="user-scalable=yes, width=1200" />
	
	<!-- end copy -->
<link href="index.hyperesources/style.css" rel="stylesheet">
<script src="index.hyperesources/jquery.min.js"></script>
<script src="index.hyperesources/bootstrap.min.js"></script>

<script type="text/javascript">
	  
	function verificavalor( valor){
  
	if( valor == 1){
	document.getElementById('jogador11').style.display = 'block';
	document.getElementById('jogador12').style.display = 'block';
	document.getElementById('jogador13').style.display = 'block';
	document.getElementById('jogador14').style.display = 'block';
	document.getElementById('jogador15').style.display = 'block';
	document.getElementById('jogador16').style.display = 'block';
	document.getElementById('jogador17').style.display = 'block';
	document.getElementById('jogador18').style.display = 'block';
	document.getElementById('jogador19').style.display = 'block';
	document.getElementById('jogador110').style.display = 'block';
	document.getElementById('jogador111').style.display = 'block';

	  
	  document.getElementById('jogador21').style.display = 'none';
	  document.getElementById('jogador22').style.display = 'none';
	  document.getElementById('jogador23').style.display = 'none';
	  document.getElementById('jogador24').style.display = 'none';
	  document.getElementById('jogador25').style.display = 'none';
	  document.getElementById('jogador26').style.display = 'none';
	  document.getElementById('jogador27').style.display = 'none';
	  document.getElementById('jogador28').style.display = 'none';
	  document.getElementById('jogador29').style.display = 'none';
	  document.getElementById('jogador210').style.display = 'none';
	  document.getElementById('jogador211').style.display = 'none';
	
  }
	else if( valor == 2){
	document.getElementById('jogador11').style.display = 'none';
	document.getElementById('jogador12').style.display = 'none';
	document.getElementById('jogador13').style.display = 'none';
	document.getElementById('jogador14').style.display = 'none';
	document.getElementById('jogador15').style.display = 'none';
	document.getElementById('jogador16').style.display = 'none';
	document.getElementById('jogador17').style.display = 'none';
	document.getElementById('jogador18').style.display = 'none';
	document.getElementById('jogador19').style.display = 'none';
	document.getElementById('jogador110').style.display = 'none';
	document.getElementById('jogador111').style.display = 'none';

	  
	  document.getElementById('jogador21').style.display = 'block';
	  document.getElementById('jogador22').style.display = 'block';
	  document.getElementById('jogador23').style.display = 'block';
	  document.getElementById('jogador24').style.display = 'block';
	  document.getElementById('jogador25').style.display = 'block';
	  document.getElementById('jogador26').style.display = 'block';
	  document.getElementById('jogador27').style.display = 'block';
	  document.getElementById('jogador28').style.display = 'block';
	  document.getElementById('jogador29').style.display = 'block';
	  document.getElementById('jogador210').style.display = 'block';
	  document.getElementById('jogador211').style.display = 'block';
 }
}


</script>
	  
<script type="text/javascript">

	$(document).ready(function() {

	$('#pacote').on('change', function() {
        $.ajax({
            type: 'POST',
            url: 'index.hyperesources/lista_datas.php',
            dataType: 'html',
            data: {'pacote': $('#pacote').val()},
            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                $('#datas').attr('disabled', 'disabled');
                $('#datas').html('<option value="">Carregando...</option>');

                $('#horarios').html('<option value="">Data</option>');
                $('#horarios').attr('disabled', 'disabled');
            },
            // Após carregar, coloca a lista dentro do select de cidades.
            success: function(data) {
                if ($('#pacote').val() !== '') {
                    // Adiciona o retorno no campo, habilita e da foco
                    $('#datas').html('<option value="">Selecione</option>');
                    $('#datas').append(data);
                    $('#datas').removeAttr('disabled').focus();
                } else {
                    $('#datas').html('<option value="">Pacote</option>');
                    $('#datas').attr('disabled', 'disabled');

                    $('#horarios').html('<option value="">Data</option>');
                    $('#horarios').attr('disabled', 'disabled');
                }
            }
        });
    });

		
    $('#datas').on('change', function() {
        $.ajax({
            type: 'POST',
            url: 'index.hyperesources/lista_horarios.php',
            dataType: 'html',
            data: {'datas': $('#datas').val()},
            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                $('#horarios').attr('disabled', 'disabled');
                $('#horarios').html('<option value="">Carregando...</option>');
            },
            // Após carregar, coloca a lista dentro do select de bairros.
            success: function(data) {
                if ($('#datas').val() !== '') {
                    // Adiciona o retorno no campo, habilita e da foco
                    $('#horarios').html('<option value="">Selecione</option>');
                    $('#horarios').append(data);
                    $('#horarios').removeAttr('disabled').focus();
                } else {
                    $('#horarios').html('<option value="">Data</option>');
                    $('#horarios').attr('disabled', 'disabled');
                }
            }
        });
    });

	
	

	});

	
	
	  $(document).ready(function(){});
function checaform(){
  var obj = $('#formulario').serialize();
  $.post('index.hyperesources/consulta.php', obj, function(res){
 console.log(data);

  })
}
	  
	
	
	
	  </script>


    </head>
  <body>

	  <div style="z-index:5 !important;position: absolute;float: left;width:100% !important;top:60% !important;background-color: transparent">
       
	<?php
include_once "conexao.php";

$dataTimesStamp = date("Y-m-d G:i:s");

mysql_connect($host,$usuario,$senha) or die("Erro nível 1 aperte CTRL + F5");
mysql_select_db("xxxx") or die("Erro nível 2");
	
$acao100 = 'Select * from pacote_jogue_categorias order by NomeCategoria asc';
	
	
$rs_acao100 = mysql_query($acao100) or die(mysql_error());
$total_linha100 = mysql_num_rows($rs_acao100);

	?>

<div class="styled-select green rounded" style="margin-top:0%  !important; margin-left:2% !important;width: 150px !important;margin:15px;">
        
    <select name="pacote" id="pacote" style="color:#000;width:170px !important" required;>
     <option value="">Selecione uma opção</option> 
      <?
	  while($resultado_acao100=mysql_fetch_array($rs_acao100)){

$id= $resultado_acao100["Id"];
$categoria = $resultado_acao100["Id"];
$nome_categoria = $resultado_acao100["NomeCategoria"];
$token = $resultado_acao100["Token"];
	
?>  
      <option value="<? print $categoria; ?>" class="special"><? print $nome_categoria; ?></option>  
<?
}
 
 ?>
     </select>
	   </div>
	   
	   <div class="styled-select green rounded"  style="margin-top:0%  !important; width: 120px !important;margin:15px;">

<select name="datas" id="datas" style="color:#000; width: 150px !important" class="ls-custom-select"  required>
        <option value="">Pacote</option>
    
      </select>
	   </div>
            <div class="styled-select green rounded"  style="margin-top:0%  !important;width: 120px !important;margin:15px;">
      
       <select name="horarios" id="horarios" style="color:#000;width: 150px;" class="ls-custom-select" required onchange="checaform()">
        <option value="">Data</option>
    
      </select>

    	   
           
     	   </div>      
      
           
             
  <div class="radio-group" style="position: absolute !important;z-index: 0 !important;  width: 150px;left: 69% !important;top: -60% !important;margin: 2px !important;float:left;">
     
      <div class='radio' data-value="1"  name="short"  id="short" style="margin:2px !important;width: 60px !important;float:left;">
	 
    	     <label>    <input name="short" type="radio" required="required" id="short" title="Branco" value="1" onclick="verificavalor(this.value)"/>
<img src="index.hyperesources/Time1.png" width="60" height="52" alt=""/>
		  </label> 
     
     </div>
      
      
      <div class='radio' data-value="2"  name="short"  id="short" style="margin:3px !important;width: 60px !important;float:left !important;margin-left: 10px !important"> <label>
    <input name="short" type="radio" required="required" id="short" title="Preto" value="2"  onclick="verificavalor(this.value)"/>
		 <img src="index.hyperesources/Time2.png" width="60px !important" height="52" alt=""/>
     </label> 
     </div>
 

             </div>

             
             <script type="text/javascript">

	$('.radio-group .radio').click(function(){
    $(this).parent().find('.radio').removeClass('selected');
    $(this).addClass('selected');
    var val = $(this).attr('data-value');
    //alert(val);
    $(this).parent().find('input').val(val);
});
	</script>

		 

</div>


  </body>
</html>

 

2) Consulta.php:

Pagina que recebe  os dados, faz a consulta no banco e retorna os valores que serao distribuidos em divs que estao na index.

Os resultados serao distribuidos em divs nomeadas como jogador1, jogador2, jogador3, assim por diante até 25

<?



include_once "conexao.php";

$dataTimesStamp = date("Y-m-d G:i:s");

mysql_connect($host,$usuario,$senha) or die("Erro nível 1 aperte CTRL + F5");
mysql_select_db("xxxx") or die("Erro nível 2");


if(($_REQUEST[pacote]!=NULL) and ($_REQUEST[datas]!=NULL)  and ($_REQUEST[horarios]!=NULL) ) {
	
	
$acao100= "Select Id from pacote_jogue_principal  where Data ='$_REQUEST[datas]' and Horario ='$_REQUEST[horarios]' and Categoria = '$_REQUEST[pacote]' and Status ='S' order by Id asc limit 0,1";
	

$rs_acao100 = mysql_query($acao100) or die(mysql_error());
$total_linha100 = mysql_num_rows($rs_acao100);

 while($resultado_acao100=mysql_fetch_array($rs_acao100)){
$pacotedefinido = $resultado_acao100["Id"];

 }

$acao1= "Select * from pacote_jogue_posicoes  where IdPacotePrincipal = '$pacotedefinido' and Camisa = '1' and Time = '1' order by Id asc limit 0,1";
	
$rs_acao1 = mysql_query($acao1) or die(mysql_error());
$total_linha1 = mysql_num_rows($rs_acao1);

 while($resultado_acao1=mysql_fetch_array($rs_acao1)){
$camisa1_id_equipeA = $resultado_acao1["Id"];
$camisa1_time_equipeA = $resultado_acao1["Time"];
$camisa1_posicao_equipeA = $resultado_acao1["Posicao"];
$camisa1_status_equipeA = $resultado_acao1["Status"];
$camisa1_nome_equipeA = $resultado_acao1["Nome"];
$camisa1_pedido_equipeA = $resultado_acao1["Pedido"];
$camisa1_reserva_equipeA = $resultado_acao1["Reserva"];
$camisa1_prazo_equipeA = $resultado_acao1["PrazoReserva"];

	 
 }
 	
	

}

 ?>

Eu preciso printar a variavel $camisa1_prazo_equipeA, por exemplo, em uma div chamada jogador1 que tem la na index.php

 

Ou seja, na index, ao selecionar o pacote, a data, o horario, ele vai verificar se o jogador1 ja esta preenchido, se estiver ele trara o nome da pessoa que ja reservou....

 

Basicly isso.

 

Consegue me dar um exemplo com base nesse arquivo e eu sigo por aqui?

 

Obg mesmo pela ajuda, já estou há 2 dias batalhando nisso, li mto mas nao entrou na cabeca como fazer.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, além do que você está fazendo nestes combos do pacote, da data e do horário, você vai precisar fazer mais uma coisa para os 3, adicionar um if verificando se os 3 estão selecionados e se estiverem fazer mais uma chamada ajax para a página de consulta.

 

Vou escrever por cima e você faz alguns ajustes para sua situação(tem que colocar algo parecido para os 3)

 

if ($('#pacote').val() != "" && $('#datas').val() && $('#horarios').val() != "")
{
        $.ajax({
            type: 'POST',
            url: 'index.hyperesources/consulta.php',
            dataType: 'html',
            data: {'datas': $('#datas').val()},

            success: function(data) {
                $('#jogador1').html('data');
            }
        });
}

 

Na sua página de consulta.php tem que colocar os dados de acordo com o que você quer inserir na div jogador1, os dados formatados em um table por exemplo.

 

Acho que é +/- isso

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui, obrigado!

 

Utilizei

 

function ChecarCamisa()
            
	
	{
                $.ajax({
                    type: "POST",
                   url: 'index.hyperesources/jogador25.php',
					 dataType: 'html',
            data: {'pacote': $('#pacote').val(),'horarios': $('#horarios').val(),'datas': $('#datas').val()},
					
                    cache: false,
                    success: function(data){
                        $('#jogador25').html(data);
                         }
                });
            }
 

Obrigado  Pita, obrigado Williams

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por joao b silva
      Tenho uma pequena aplicação em php que gera arquivos pdf com a MPDF e envia email com a PHPMAILER. De repente a app parou de enviar os emails  e apresenta a seguinte mensagem de erro:
       
      Error PHPMailer: SMTP Error: Could not authenticate.
       
      Faço uso de um hotmail para a configuração do PHPMAILER.
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos.
       
      Quando programava em DOS. utilizava algumas teclas de atalho para: SALVAR / EDITAR / EXCLUIR / IMPRIMIR.
      Por exemplo:
      Salvar ----> ALT+S
      Editar ----> ALT+E
      Excluir --> ALT+X
      Imprimir -> ALT+I

      no PHP tem como colocar esses ATALHOS nos button, para o usuário trabalhar com esses atalhos e como seria ?

      grato,
       
      Cesar
    • Por violin101
      Caros Amigos, saudações.
       
      Por favor, me perdoa em postar uma dúvida.
       
      Preciso criar uma Rotina onde o usuário possa buscar na Base de Dados de Produtos, tanto por Código e Descrição, ou seja:
      - caso o usuário digita o Código, mostra os dados do Produto.
      - caso o usuário digita a Descrição, mostra os dados do Produto
       
      Fiz uma Rotina, onde o usuário digita a DESCRIÇÃO com a função AUTOCOMPLETE.    <=== está funcionando certinho.
       
      Minha dúvida é como faço para DIGITAR o Código e mostrar os dados também.
       
      o meu AutoComplete na MODEL está assim.
      public function autoCompleteProduto($q){ $this->db->select('*' ) ->from('produtos') ->where('produtos.statusProd',1) ->like('descricao', $q) ->limit(5) ->order_by('descricao', 'ASC'); $query = $this->db->get(); if ($query->num_rows() > 0) { foreach ($query->result_array() as $row) { $row_set[] = ['label' => str_pad($row['idProdutos'], '5', '0', STR_PAD_LEFT).' - '.$row['descricao'], 'id' => $row['idProdutos'], 'descricao' => $row['descricao'], 'cod_interno' => $row['cod_interno'], 'prd_unid' => $row['prd_unid'], 'estoque_atual' => $row['estoque_atual'] ]; } echo json_encode($row_set); } }  
       
      no CONTROLLER está assim:
      public function autoCompleteProduto() { $this->load->model('estoque/lancamentos_model'); if (isset($_GET['term'])) { $q = strtolower($_GET['term']); $this->lancamentos_model->autoCompleteProduto($q); } }  
       
      na VIEW está assim:
      <div class="col-md-10"> <label for="idProdutos">Produto:</label> <input type="hidden" name="idProdutos" id="idProdutos"> <input type="text" class="form-control" id="descricao" name="descricao" style="font-size:15px; font-weight:bold;" placeholder="Pesquisar por descrição do produto" disabled> </div>  
      VIEW + JAVASCRIPT
       
      //Função para trazer os Dados pelo o AutoComplete. function resolveAutocomplete() { $("#descricao").autocomplete({ source: "<?php echo base_url(); ?>estoque/lancamentos/autoCompleteProduto/", minLength: 2, select: function (event, ui) { $("#idProdutos").val(ui.item.id); $("#cod_interno").val(ui.item.cod_interno); $("#descricao").val(ui.item.descricao); $("#prd_unid").val(ui.item.prd_unid); $("#estoque_atual").val(ui.item.estoque_atual); $("#qtde").focus(); } }); } // inicia o autocomplete resolveAutocomplete();  
      Grato,
       
      Cesar
    • Por belann
      Olá!
       
      Estou tentando criar um projeto laravel e está dando o seguinte erro 
      curl error 60 while downloading https://getcomposer.org/versions: SSL certificate problem: unable to get local issu
        er certificate
      Já tentei atualizar o composer, mas dá o mesmo erro acima.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.