Ir para conteúdo
AndréAraujo

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

Recommended Posts

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por JGD
      Supondo que tenho um input name = dataHoraINI...
      Este input tem o  valor/value =  21/03/2019 09:00 
      Chamo a função abaixo pelo <button...:
       
      <button class="btn btn-primary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)"> <i class="glyphicon glyphicon-calendar"></i> </button>  
      São 03 parâmetros: popdataJGD(objeto, div, value).. Sendo o 3º: data + hora.
       
      Observar que passo para a função o 3º parâmentro assim: document.getElementById('dataHoraINI').value
      Como poderia passar este 3º paramentro como string e inline a data e hora ???
       
      Qual diferença entre: 
      document.getElementById('dataHoraINI').value E
      this.value E/Ou ainda.
      var data_hora = "21/03/2019 09:00" Neste caso : popdataJGD(objeto, div, data_hora)... Observar no code acima a questão das aspas simples.
       
      Agradeço qualquer ajuda conceitual
       
    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por alh
      Estou seguindo as especificações corretamente do git. https://github.com/opencartbrasil/opencart-rest-api/blob/master/README.md
      Estou tendo o erro ao acessar minha página de integração:
      ERRO: Not found (entity)
      Ao acessar minha página que contém o seguinte código: categorias.php
       
      No arquivo abaixo estou colocando a minha KEY e domínio correto.
      <?php $headers = array(); $headers[] = 'Content-Type: application/json'; $headers[] = 'key: MINHAKEY'; // // Replace key value for API key OpenCart (Only numbers and letters) $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'http://www.NOMEDOMEUDOMINIO.com.br/api.php/categories', // Replace domain and table name CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_SSL_VERIFYPEER => false ]); $out = curl_exec($ch); curl_close($ch); print_r( $out ); // Result json ?>
    • Por gleidsonb12
      Bom dia amigos, estou iniciando no javascript e tenho seguinte problema, preciso que o javascript mostre uma campo justificativa se a data selecionada no input for superior a 5 dias da data atual.
       
      O script que estou tentando dazer funcionar é este:
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script> function obtemMes() { var mes = document.getElementById("dataselecionada").value; if (mes<>"2019-03-15"){document.getElementById("mes").style.display = "none";} </script> <div class="form-group col-md-3"> <label>Data</label> <input type="date" id="dataselecionada" class="form-control" onchange="obtemMes()"> </div> <div class="form-group col-md-3" id="mes"> <label>Mes</label> <input type="text" class="form-control"> </div> Qualquer ajuda é bem vinda
×

Informação importante

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