Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>Moderadores, podem transferir para Jquery, por gentileza?
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.
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 divO fiz com base nesse tutorial mto bacana
https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax
Só nao consegui imprimir o resultado final na div
Use .html()
E claro, concatene os valores que vem do retorno da requisição com o HTML.
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á retornandoOi 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....
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://www.w3schools.com/jquery/jquery_ajax_get_post.asp)
[https://api.jquery.com/jquery.post/](https://api.jquery.com/jquery.post/)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.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 é +/- issoConsegui, 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
Amigos, alguem consegue dar uma dica?
Tentei outras opcoes, mas nao obtive exito