Como inserir um "carregando" neste script?

Leandro Persi, nesta parte do script:

 oAjax.onreadystatechange = function() {
 if (oAjax.readyState == 4) {
 //Mostra o HTML recebido
 retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
 document.getElementById(fila[ifila][0]).innerHTML = retorno;
 //Roda o próximo
 ifila++;
 if(ifila < fila.length) setTimeout("ajaxRun()", 20);
 }
 };

Você poderia fazer desta forma:

 oAjax.onreadystatechange = function() {
 if (oAjax.readyState == 1) {

 document.getElementById('loading').innerHTML = 'onload.gif';

 } else if (oAjax.readyState == 4) {
 //Mostra o HTML recebido
 retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
 document.getElementById(fila[ifila][0]).innerHTML = retorno;
 //Roda o próximo
 ifila++;
 if(ifila < fila.length) setTimeout("ajaxRun()", 20);

 document.getElementById('loading').innerHTML = '';

 }
 };

Ou seja, o "oAjax.readyState == 1" significa enquanto estiver carregando e "oAjax.readyState == 4", quando estiver carregado.

Por isso que pus : document.getElementById('loading').innerHTML = 'onload.gif'; no State == 1. Onde significa que o gif (onload.gif) será inserido na DIV (loading), enquanto document.getElementById('loading').innerHTML = ""; dis que ao ter carregado ,ou seja, State == 4; a div (loading) não terar nada inserido..

Valeu JHonei, só uma dúvida.

Estou testandm o Wamp e a página carrega muito rápido e nao dá pra ver o loading, existe um jeito de "atrasar" o carregamento para dar tempo de ver o gif e ter certeza de que esta funcionando corretamente?

Eu fiz a alteração que você pediu e deu certo, a página foi carregada (mudou de página) mas não vi o loading

Obrigado pela ajuda

você poderá fazer isto com PHP. A função é a sleep();

Encontrarás um exemplo neste link: http://www.criarweb.com/artigos/ajax-jquery-com-mensagem-de-carregamento.html

Acessei o link e estou trabalhando com o tutorial e é isso que eu preciso só que ja pintou uma dúvida; No exemplo que estou acompanhando eu defino uma ID para o link e o javascript reconhece essa ID e executa a função, certo? Pelo o que eu entendi, terei que definir uma ID para todos os links do site, inclusive das páginas internas, e duplica a função Javascript que executa o carregamento, não é?

Por exempl:

Tenho um link LINK 01 com id "linkajax" que chama o java que tem a função:

<script>

$(document).ready(function(){

 $("#linkajax").click(function(evento){

 evento.preventDefault();

 $("#carregando").css("display", "inline");

 $("#destino").load("pagina_lenta.php", function(){

 $("#carregando").css("display", "none");

 });

 });

})

</script>

que carrega a página. A dúvida: Para cada link do site eu terei que duplicar esse script e alterar a ID?

Cara, muito obrigado hein

Use class ao invés de ID nos link's:

e altere o script e o css de:

#linkajax

para:

.linkajax

Como a DIV carregando e a DIV destino não são mais que uma, então não terá necessidade!!

<script>
$(document).ready(function(){
 $(".linkajax").click(function(evento){
 evento.preventDefault();
 $("#carregando").css("display", "inline");
 $("#destino").load("pagina_lenta.php", function(){
 $("#carregando").css("display", "none");
 });
 });
})
</script>

exemplo dos links:

<ul>

<li><a href="#" class="linkajax">Home</a></li>

<li><a href="#" class="linkajax">Fotos</a></li>

<li><a href="#" class="linkajax">Vídeos</a></li>

<li><a href="#" class="linkajax">Perfil</a></li>

<li><a href="#" class="linkajax">Quem Somos</a></li>

</ul>

A class serve quando queremos utilizar mais de um item para executar a mesma função!!

Tutorial: http://pt-br.html.net/tutorials/css/lesson7.php

Acho que entendi, mas continuo com problemas, não sei se expliquei bem. Vamos lá.

Seguindo o que você me passou todos os links vão executar a mesma função " $("#destino").load("pagina_lenta.php", function(){" e abrirão a mesma página "pagina_lenta.php", preciso que cada link abra um página diferente, inclusive os links que poderão estar nessas páginas internas, entendeu?

Sem querer abusar, o que devo fazer no javascript para alterar a frase de "carregando" para um gif animado que tenho?

Mais uma vez obrigado

Leandro Persi, me desculpe por não ter explicado direito anteriormente, mas aqui vai um exemplo completo do que você quer!!

Ps: O click (**'** $('.linkajax').click(function(evento){ **'**) está pegando todos os elementos que estão com a class **"linkajax" **(**'** <a href="home.html" class="linkajax">Home</a> **'**) e está obtendo o **href** para incluir o arquivo do **link** na **DIV** destino (**'** $("#destino").load($(this).attr('href')); **'**)..

 

a parte do **gif** carregando funcionar com a simples forma: o **gif** já esta na **DIV**, mas como você deve ter percebido, esta linha do **script** que está inicialmente no código (**'** $(" carregando").hide(); **'**) onde hide(); indica que a div que contem o **gif** animado irá ficar omitida ate que o código seja executado, ou seja, quando algum dos **link's** for clicado, ai ela vai chamar este código (**'** $("#carregando").ajaxStart(function(){ $(this).show(); }); **'**) que chow(); significa mostrar..

 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 $("#carregando").hide();
 $('.linkajax').click(function(evento){
 $("#carregando").ajaxStart(function(){ $(this).show(); });
 $("#carregando").ajaxStop(function(){ $(this).hide(2000); });
 $("#destino").load($(this).attr('href'));
 return false
 })

})
</script>

</head>
<body>

<div id="carregando"><img src="http://ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" /></div>

<ul>
<li><a href="home.html" class="linkajax">Home</a></li>
<li><a href="fotos.html" class="linkajax">Fotos</a></li>
<li><a href="videos.html" class="linkajax">Vídeos</a></li>
<li><a href="perfil.html" class="linkajax">Perfil</a></li>
</ul>

<div id="destino"></div>

</body>
</html>

Sim, só mais uma coisa!! Não sei se você percebeu mais o jquery não gera histórico no navegador, com isso o botão de voltar fica desativado, mas você pode resolver isto com o jquery history.

O novo código, plugin e tutorial estará neste link: http://tkyk.github.com/jquery-history-plugin/#demos

Jhonei, bom dia.

Acredito que agora esta funcionando, coloquei o script que você indicou na página do site que estou desenvlvendo e funcionou.

Cara muito obrigado pela força e atenção que você me deu, dá uma olhada

http://www.acrrejuntadora.com.br/teste/ajax/index2.php

PS.: Não quero abusar mas notei um erro, um conflito entre o menu e quando o usuário clicar em algum item (imagem ou link) do conteudo do site.

O menu foi feito para que o usuário clique na página que deseja e esse item no menu fique ativo, indicando o local que ele esta, mas quando clico nas fotos (tanto as do topo quanto as do conteudo) o ON do menu desaparece, acredito que haja um conflito na ação CLICK mas não tenho idéia de como corrigir isso.

Valeu parceiro

Veja, pelo que percebi, você possui 3 chamadas para o jquery, onde isto é errado:

js/jquery-1.7.2.min.js

jquery-1.3.2.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

mantenha só uma chamada (' <script src="js/jquery-1.7.2.min.js"></script> ') e com prioridade, assima de todos os scripts que serão derivados, exemplo: aquele que fizemos e o lightbox.

Depois, você ainda não alterou o segundo e terceiro menuu (' href="#" ') e se você perceber quando clicamos neles, é acrescentado um '#' na url e isto também poderia ser o motivo.

Bom dia Jhonei e colegas.

Parceiro, fiz como você disse e coloquei somente um jquery para executar todas as solicitações, como eu fui pegando um exemplo aqui e outro ali, fui adcionando para testar e agora deu pra fazer a limpa.

JqueyHistory

http://www.acrrejuntadora.com.br/teste/ajax/history/index.php

JqueyLoading

http://www.acrrejuntadora.com.br/teste/ajax/loading/index.php

Bom, vamos lá.

Publiquei os dois "modelos" que desenvolvemos (graças a sua ajuda), um com o loading (mas com aquela limitação do histórico) e outro somente com o histórico, ambos funcionando corretamente só com um conflito entre o clique nas imagens e o ON do menu, quando clicamos no menu o item fica "aceso" mas quando clico em uma das imagens para amplia-la com o ligthbox o ON apaga, mas isso vou tentar resolver depois.

Decidi utilizar o site que criamos com o jqueryhistory, acredito que isso será melhor para o usuário, e tentei adcionar o loading nesse svript mas, pra variar, não deu muito certo, achei que seria somente adcionar o jquery e renomear algumas divs mas não consegui, se você puder continuar me auxiliando e me dizer como devo fazer para colocar o loading no na página com o script do historico ai vai ficar show e fecho o desenvolvimento da página mestre que será a base para todo o site.

PS. Outra coisa que ainda não consegui fazer é colocar o conteudo da index na página inicial do JqueryHistory, alí esta a div cont onde são abertas as páginas, como eu faço para assim que o site é aberto ja carregue a INICIAL_CONT como são abertos os conteudos das páginas do menu?

JqueyHistory

http://www.acrrejuntadora.com.br/teste/ajax/history/index.php

JqueyLoading

http://www.acrrejuntadora.com.br/teste/ajax/loading/index.php

Mais uma vez muito obrigado, sem sua ajuda eu naõ teria conseguido.

Começando!

Eu navego no Firefox e fiz tudo isso testando nele, agora lembrei do bendiyo IE, e adivinha, deu pau.

Quando acesso a página incial já aparece na barra de status que há um erro, segue:

O objeto não dá suporte para a propriedade ou método

Linha: 83

Caractere: 3

Código: 0

URI: http://localhost/showdebola/teste/jqueryhistory/index.php

O que tem nessa linha é isso

$("a[@rel=imasters]").click(function(){

Que faz parte desse script

<script type="text/javascript">
function pageload(hash) {

	if(hash) {

 $("#load").load(hash + ".html");
	} else {
 $("#load").empty();
	}
}

$(document).ready(function(){

	$.historyInit(pageload);

	$("a[@rel='imasters']").click(function(){
 var hash = this.href;
 hash = hash.replace(/^.*#/, '');
 $.historyLoad(hash);
 return false;
	});
});
</script>

Esse é o primeiro problema.

O segundo acontece quando clico em um dos itens do menu, a página é recarregada e o conteudo abre todo desalinhado como se não pegasse as configurações CSS e na barra de status parece o seguinte erro

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; BRI/2)

Carimbo de data/hora: Tue, 5 Jun 2012 18:09:53 UTC

Mensagem: Objeto esperado

Linha: 46

Caractere: 1

Código: 0

URI: http://localhost/showdebola/teste/jqueryhistory/index.php

Mensagem: 'parent.document.getElementById(...)' é nulo ou não é um objeto

Linha: 142

Caractere: 3

Código: 0

URI: http://localhost/showdebola/teste/jqueryhistory/produtos/produtos.html

Mensagem: Syntax error, unrecognized expression: [@rel=imasters]

Linha: 3

Caractere: 15260

Código: 0

URI: http://localhost/showdebola/teste/jqueryhistory/js/jquery-1.7.2.min.js

O objeto não dá suporte para a propriedade ou método

Linha: 83

Caractere: 3

Código: 0

URI: http://localhost/showdebola/teste/jqueryhistory/index.php

Nessa linha existe isso

parent.document.getElementById("iframe").height = document.getElementById("conteudo").scrollHeight + 40; //40: Margem Superior e Inferior, somadas

Rapaz eu to quase largando mão, ta dificil, mas vamos lá.

Valeu

>
O que tem nessa linha é isso

$("a[@rel=imasters]").click(function(){

Que faz parte desse script

<script type="text/javascript">
function pageload(hash) {

	if(hash) {

 $("#load").load(hash + ".html");
	} else {
 $("#load").empty();
	}
}

$(document).ready(function(){

	$.historyInit(pageload);

	$("a[@rel='imasters']").click(function(){
 var hash = this.href;
 hash = hash.replace(/^.*#/, '');
 $.historyLoad(hash);
 return false;
	});
});
</script>

pelo que vi "Leandro Persi" você modificou um pouco o código mais acredito que o código bom e limpo seria este::

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/tkyk/jquery-history-plugin/raw/master/jquery.history.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
 function load(num) {
 $('#destino').load(num +".html");
 }

$("#carregando").ajaxStart(function() {
$(this).show();
});
 $("#carregando").ajaxStop(function() {
$(this).hide(2000);
});

 $.history.init(function(url) {
 load(url == "" ? "1" : url);
 });

 $('.linkajax').click(function(e) {
 var url = $(this).attr('href');
 url = url.replace(/^.*#/, '');
 $.history.load(url);
 return false;
 });
 });
</script>

</head>

<body>

<div id="carregando"><img src="http://ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" /></div>

<ul>
<li><a href="#home" class="linkajax">Home</a></li>
<li><a href="#fotos" class="linkajax">Fotos</a></li>
<li><a href="#videos" class="linkajax">Vídeos</a></li>
<li><a href="#perfil" class="linkajax">Perfil</a></li>
</ul>

<div id="destino"></div>

</body>
</html>

 

E na questão da linha "$("a[@rel=imasters]").click(function(){" seria assim

$(".linkajax").click(function(e){

Sim, um bom exemplo seria este:: http://www.serpere.info/jquery-history-plugin/samples/ajax/

Boa tarde Jhonei

Rapaz, peguei o codigo da página inicial e aplquei no que estou fazendo, fiz as alterações e correções que você sugeriu e esta quase 100%, só estou com mais 4 problemas. ()parece que resolve uma coisa aparece outra

Clique aqui

Primeiro

Na index esta todo o esquema e scripts mas ela esta sem conteudo, como faço para adcionar o conteudo da index do mesmo jeito que as páginas internas são abertas? Quando abro a index ela aparece sem nada, eu queria saber como faço para abrir logo de cara no local do conteudo a INICIAL.JTML assim como acontece quando clico em um dos itens do menu, entendeu?

Segundo

Estou com problemas com o botão "VOLTAR", quando acesso uma das páginas e clico pra voltar para a index o navegador faz o processo mas lá no endereço fica "www.meusite.com.br/index.php#", a serquilha # não some e a página cotinua onde esta, dá pra resolver?

Terceira

Quando o mouse passa sobre as imagens ou descrição dos produtos eu configurei com CSS para que apareça um contorno sobre o item selecionado, no FIrefox esta OK mas no IE não funciona, inclusive perde o efeito de "mãozinha" do mouse sobre links

Quarto

E por fim, o menu. Esse menu é configurado para manter o intem ON sempre que clicado e permanecer assim somente quando o usuário abrir outra página através dele (pelo menos deveria ser assim né) mas se eu executo outra função CLICK (por exemplo clicando nas fotos)o ON desaparece.

Parceiro, valeu mesmo pela força, espero não estar abusando

1º problema:

Utilize este código:

jQuery(document).ready(function($) {
$("#centro_editavel").load("home.html");
});

Esta função sera um comando a parte da requisição jquery history ai ela ficaria assim:

<script type="text/javascript">
jQuery(document).ready(function($) {
 function load(num) {
 $('#destino').load(num +".html");
 }

 $("#carregando").ajaxStart(function() {
 $(this).show();
 });
 $("#carregando").ajaxStop(function() {
 $(this).hide(2000);
 });

 $.history.init(function(url) {
 load(url == "" ? "1" : url);
 });

 $('.linkajax').click(function(e) {
 var url = $(this).attr('href');
 url = url.replace(/^.*#/, '');
 $.history.load(url);
 return false;
 });
});

jQuery(document).ready(function($) {
$("#centro_editavel").load("home.html");
});
</script>

OU

o Include php:

<?php include 'home.html'; ?>

 mas para este include funcionar a sua página tem que ser salva no formato php!! e ele será botado dentro da div que receberá o conteúdo!!

 

<div id="destino"><?php include 'home.html'; ?></div>

2º problena:

Aqui não houve problema então deduzo que você clicou em um dos links que não tinham url e sim "#". no cado dos link's camisa e tênis dos tópicos Futebol e casual!!

3º problema:

Cara então é teu css que está mau feito mas para a borda se usa:

#IDdaDIV:hover { border:1px solid #000;}

e caso o cursor ainda esteja falhando bote esta função no css também (' cursor: pointer; ')

4º problema:

Eu utiliso css para fazer isto!!

exemplo:

#IDdoMENU .linck.closed {

color:#FFF;
background-color: #E7931A;
}

color:#000;
background-color: #FFF;
}

Estamos evoluindo... valeu

Bom, os problemas 1 (carregar a página inicial) e 3 (contorno nos produtos e informações) estão corrigidos, mas resolvemos parcialmente o problema do botão VOLTAR; se eu navegar no site (somente os dois primeiros botoes) o VOLTAR funciona mas se tento voltar para a index não dá certo, a tela chega a mexer e o endereço lá em cima muda para a INDEX.PHP mas o conteudo continua a da ultima página visitada, por exemplo:

Estou na index e clico em Bermudas e depois Camisetas, da página camisetas eu consigo voltar para a Bermudas mas quando clico em voltar mais uma vez para ir para a index (na verdade carregar o conteudo da index como o das outras) o navegador chega a piscar, a tela rola até o topo e o procedimento do ajax, o loading, recarrega a pagina que estou. Outra coisa que acontece é que na barra de endereços do IE aparece a index.php# e no firefox indica que estou na index mas o conteudo não mudou da ultima página para o conteudo da index (inicial.html)

E o quarto problema, o dos botoes On/Over eu tentei fazer mas acho que não entendi bem, como é

Ja publiquei as alterações

Site