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

Por , em Javascript

Recommended Posts

ronaldosdb    1

ronaldosdb
Postado

 

 

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

Williams Duarte    431

Williams Duarte
Postado

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

ronaldosdb    1

ronaldosdb
Postado

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

Williams Duarte    431

Williams Duarte
Postado

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

Pita    53

Pita
Postado

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

ronaldosdb    1

ronaldosdb
Postado

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

Pita    53

Pita
Postado

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

ronaldosdb    1

ronaldosdb
Postado

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

Pita    53

Pita
Postado

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

ronaldosdb    1

ronaldosdb
Postado

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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Ler campos com caracteres especiais no xml
      Por ILR master
      Fala galera.
      Espero que todos estejam bem.
      Seguinte: Tenho um arquivo xml onde alguns campos estão com : (dois pontos), como o exemplo abaixo:
       
      <item>
      <title>
      d sa dsad sad sadasdas
      </title>
      <link>
      dsadas dsa sad asd as dsada
      </link>
      <pubDate>sadasdasdsa as</pubDate>
      <dc:creator>
      d sad sad sa ad as das
      </dc:creator>
      </item>
       
      Meu código:
       
      $link = "noticias.xml"; 
      $xml = simplexml_load_file($link); 
      foreach($xml -> channel as $ite) {     
           $titulo = $ite -> item->title;
           $urltitulo = $ite -> item->link;
           print $urltitulo = $ite -> item->dc:creator;
      } //fim do foreach
      ?>
       
      Esse campo dc:creator eu não consigo ler. Como faço?
       
      Agradeço quem puder me ajudar.
       
      Abs
       
       
    • First
      Sistema não funciona corretamente
      Por First
      Olá a todos!
       
      Eu estou criando um sistema do zero mas estou encontnrando algumas dificuldades e não estou sabendo resolver, então vim recorrer ajuda de vocês.
      Aqui está todo o meu código: https://github.com/PauloJagata/aprendizado/
       
      Eu fiz um sistema de rotas mas só mostra o conteúdo da '/' não sei porque, quando eu tento acessar o register nada muda.
      E eu também quero que se não estiver liberado na rota mostra o erro de 404, mas quando eu tento acessar um link inválido, nada acontece.
      Alguém pode me ajudar com isso? E se tiver algumas sugestão para melhoria do código também estou aceitando.
       
       
      Desde já, obrigado.
    • landerbadi
      Saber se todos os produtos de uma consulta estão cadastrados no banco de dados
      Por landerbadi
      Olá pessoal, boa tarde
       
      Tenho uma tabela chamada "produtos" com os seguintes campos (id, produto) e outra tabela chamada "itens" com os seguintes campos (id, prod_01, prod_02, prod_03, prod_04).
       
      Na tabela produtos eu tenho cadastrado os seguintes produtos: laranja, maçã, uva, goiaba, arroz, feijão, macarrão, etc.
       
      Na tabela itens eu tenho cadastrado os itens da seguinte maneira:
       
      1, laranja, uva, arroz, feijão;
      2, maçã, macarrão, goiaba, uva;
      3, arroz, feijão, maçã, azeite
       
      Meu problema é o seguinte: 
      Eu escolho um produto da tabela "produtos", por exemplo "uva".  Preciso fazer uma consulta na tabela "itens" para ser listado todos os registros que contenham o produto "uva" e que todos os demais produtos estejam cadastrados na tabela "produtos".
       
      No exemplo acima seria listado apenas dois registros, pois o terceiro registro não contém o produto "uva". 
       
      Alguém pode me ajudar? Pois estou quebrando a cabeça a vários dias e não consigo achar uma solução.
×

Informação importante

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

  Aceito