Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, estou com uma dúvida referente ao Ajax, necessito que o item selecionado no primeiro select seja enviado ao carregar a página, quando faço seleção diretamente no primeiro select o segundo é chamado normalmente, tentei trocar o change por focus mas não obtive resultado.
<label for="id_categoria">Categoria:</label><br>
<select name="id_categoria" id="id_categoria">
<!--Aqui existe um script que seleciona o registro que esta no banco de dados -->
<!--Exemplo:<option value="1" selected>Valor 1</option> -->
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select><br><br>
<label for="id_sub_categoria">Sub-Categoria:<span class="carregando"> Carregando...</span></label><br>
<select name="id_sub_categoria" id="id_sub_categoria"></select>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3');
</script>
<script type="text/javascript">
$(function(){
$('#id_categoria').change(function(){
if( $(this).val() ) {
$('#id_sub_categoria').hide();
$('.carregando').show();
$.getJSON('sub_categoria.ajax.php?search=',{id_sub_categoria: $(this).val(), ajax: 'true'}, function(j){
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id_sub_categoria + '">' + j[i].nome_sub_categoria + '</option>';
}
$('#id_sub_categoria').html(options).show();
$('.carregando').hide();
});
} else {
$('#id_sub_categoria').html('<option value="">– Escolha uma Categoria –</option>');
}
});
});
</script>
Agradeço a atenção!Olá reebr, primeiramente obrigado pela atenção, o meu problema se encontra nesta linha:
$('#id_categoria').change(function(){
sem ela o valor do select não entra, tentei inserir o load, focus e mais algumas outras coisas.
Até agora não encontrei nada, meu conhecimento sobre a linguagem é limitado, você não tem alguma ideia de algo que eu possa fazer?
Olá André,
tenta colocar um option vazio, para obrigar o usuário a selecionar, o evento change só é acionado se o valor do elemento for alterado então precisa que o usuário escolha uma opção. Para debugs utilize console.log(alguma coisa) ele gera uma mensagem no console debuger do seu navegador e vc consegue debugar teu código e ver o que está e o que não esta acontecendo.
<option value=""></option>
//Utilize as ferramentas de desenvolvedor de seu navegador e
console.log(variavel);
//ou
console.log("passou por aqui...");
Cara, você tem que definir em qual evento você quer que a função seja executada.
Para executar a função quando a página é carregada, usa-se o evento "onload", e para quando o item é alterado, usa-se o "onchange".
Se você quer que a função seja disparada quando a página é recarregada, então deve-se utilizar o evento "onload", como o amigo reebr disse.
É só fazer assim:
$(document).ready(function(){
if( $(this).val() ) {
$('#id_sub_categoria').hide();
$('.carregando').show();
$.getJSON('sub_categoria.ajax.php?search=',{id_sub_categoria: $(this).val(), ajax: 'true'}, function(j){
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id_sub_categoria + '">' + j[i].nome_sub_categoria + '</option>';
}
$('#id_sub_categoria').html(options).show();
$('.carregando').hide();
});
} else {
$('#id_sub_categoria').html('<option value="">– Escolha uma Categoria –</option>');
}
});Olá BRAndersonLuciona, obrigado pela atenção, a página onde o select vai ser exibido é uma página para criar e editar conteúdo, no caso de criação de conteúdo o primeiro option será vazio para que o usuário escolha a categoria desejada, até aqui o código já está funcionando corretamente.
Mas na parde de editar o conteúdo, a seleção automática é indispensável pois o primeiro select tem que carregar a categoria encontrada no banco de dados, "até aqui tudo funcionando".Olá DSerma, obrigado pela atenção, como avia dito acima, ao retirar o:
$('#id_categoria').change(function(){
o script não reconhece o valor do id do select "#id_categoria", como não tem valor ele cai no else e assim a mensagem de erro é exibida no select.
Eu não sei como substituir esta linha.
Sobre decidir qual evento eu vou usar, vou usar onchange e onload, mesmo que tenha que criar dois eventos separados.
Você fez exatamente da maneira que postei?
Da maneira que coloquei, ele vai esperar carregar toda a página, ou seja, só vai executar depois que o select tiver um valor, que no caso será o primeiro.
Sim Ctrl + c Ctrl + v, ele não reconhece o valor msm, o meu select seleciona o valor que for igual ao valor do banco de dados, no código fonte da para ver perfeitamente que exite valor no <option> e que o valor que é igual ao do banco recebeu o selected, sem contar que com o change o script funciona corretamente.