1

Não é duplicada dessa: Como executar uma script jquery ao carregar uma pagina


Tenho uma função que lista um conteúdo numa div:

function listar() {
    alert("listar"); // alert para saber se está sendo chamado
    arquivo = "lista.php";
    $.ajax({
        url:arquivo,
        success: function (textStatus) {      
            $('#iddiv1').html(textStatus);
        }
    }); 
}

Tentei carregar essa função junto da página, mas não dá certo:

$(document).ready(function(){
    listar();
});

Também, gostaria que, enquanto executar o método listar(), fique oculta a div.

Exemplo:

$('#iddiv1').hide();
$('#iddiv2').show();

Tentei assim, mas sem sucesso:

$('#iddiv1').load(function() {
    $('#iddiv1').hide();
    $('#iddiv2').show();
});
6
  • Pq não cria a função já dentro do document.ready?
    – LeAndrade
    Commented 31/07/2018 às 13:27
  • @LeAndrade Não é o exemplo que eu tentei? Ou está errado?
    – rbz
    Commented 31/07/2018 às 13:29
  • 1
    Está carregando o jQuery antes de chamar o $(document).ready(function(){? Se não, provavelmente tem um erro no console.
    – Sam
    Commented 31/07/2018 às 13:30
  • @sam a <script> da função está na <head> e o <script> do jquery, no fim da <body>... Tem que ser inversa a ordem?
    – rbz
    Commented 31/07/2018 às 13:33
  • 1
    Vc pode deixar na ordem que quiser se trocar o $(document).ready(function(){ por document.addEventListener("DOMContentLoaded", function(){
    – Sam
    Commented 31/07/2018 às 13:35

1 Resposta 1

2

Provavelmente está chamando o evento $(document).ready(function(){ antes de carregar o jQuery, e com isso resultando em erro, pois o $(document).ready é um evento jQuery.

Neste caso você tem 2 alternativas:

Ou chamar o $(document).ready(function(){ após o <script> que carrega o jQuery (após não quer dizer logo após. Após em qualquer lugar, desde que seja depois):

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
    listar();
});
</script>

Ou usar o evento nativo do JavaScript em qualquer lugar do código, antes ou depois de carregar o jQuery:

<script>
document.addEventListener("DOMContentLoaded", function(){
   listar();
});
</script>

O método .load() é usado para carregar conteúdo HTML a um elemento (uma div, por exemplo), não para detectar o carregamento da página.

Neste caso você pode executar o código após o retorno do Ajax, no success::

success: function (textStatus) {      
   $('#iddiv1').html(textStatus).hide();
   $('#iddiv2').show();
}
2
  • O sam, e o hide/show da div ?! 😅 Abro outra pergunta?
    – rbz
    Commented 31/07/2018 às 13:48
  • Resposta atualizada.
    – Sam
    Commented 31/07/2018 às 13:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .