como executar função ao carregar a página?

[AndréAraujo 2]

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!

[reebr 94]

window.onload = function(){

// faz algo

}

[AndréAraujo 2]

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?

[BRAndersonLuciano 1]

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...");

[DSerma 19]

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>');
                 }
            });

[AndréAraujo 2]

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".

[AndréAraujo 2]

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.

[DSerma 19]

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.

[AndréAraujo 2]

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.