[Resolvido] Mensagem carregando...

danielmark · Dezembro 2, 2009

Pessoal Boa tarde!

A duas semanas estou procurando uma maneira de como fazer um srcipt que exibe a mensagem "carregando..." no momento que esta carregando(ou processando) uma página (php que mostra alguns dados do BD) com ideia de usar o plugin jquery e a função load();.

Procurei algumas coisas na internet e encontrei algo sobre o AJAX mas eu não manjo nada disto. Se alguem souber como realizar isto peço que mostre como é feito este preocesso pois acredito que não seja algo tão dificil assim de fazer.

Desde já agradeço!

Abraços...

Dee · Dezembro 2, 2009

Gambiarra.

   echo $var = "Carregando";
   sleep(3); // Segundos
   echo ".";
   sleep(3); // Segundos
   echo ".";
   sleep(3); // Segundos
   echo ".";

danielmark · Dezembro 2, 2009

huahaua!

aew Dee mas aew nao fica uma coisa legal neh!

Thiago Retondar · Dezembro 2, 2009

Tente assim:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif crie uma div - ou qualquer elemento - e depois sobreponha-o com o z-index

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif depois no JavaScript, faça assim:

window.onload = function(){
var load = document.getElementById("YourIDHere");
loading.parentNode.removeChild(load);
}

Acho que vai funcionar... ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

William Bruno · Dezembro 2, 2009

Pode usar jQuery mesmo.. tem até um plugin dele para esses casos..

http://www.phpavancado.net/node/379

http://www.pinceladasdaweb.com.br/blog/2009/08/03/ajax-load-com-jquery/

Henrique Barcelos · Dezembro 3, 2009

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/359316-classe-ajax/

Veja como usar, depois, no css, faça algo assim:

#myAjaxLoading {
	background: #069;
	color: #FFF;
	padding: 2px 10px;
	font-weight: bold;
}

danielmark · Dezembro 3, 2009

Pessoal fiz tentativas com essas dicas que voces me derem mas nenhum deu certo!

alguem sabe como funciona este cod abaixo :

$(function() {

        $('#link').bind('click', function(e) { 
                var page = $(this).attr('href'); 
                $('#page').addClass('loading');
                $('#page').load('index.php?page='+page, function (){
                        $('#page').removeClass('loading');
                });
                
                e.preventDefault();
                return false; 
        });

});

Dee · Dezembro 3, 2009

Óh Fera...

Usando AJAX

Primeiro você coloca isso no LINK

// esse 'LOCAL' eh onde você quer que abra a tal pagina... depois do Carregando beleza ? Tipo uma DIV grande... você que ve ae.
<a href="#" onclick="ajaxGet('pagina.html',document.getElementById('LOCAL'),true)">

E no mesmo arquivo, você chama o arquivo que tah o AJAX.

<script src="js/micoxAjax.js?12" type="text/javascript" language="javascript"></script>

e o codigo do AJAX eh esse, micoxAjax.js?12

function ajaxGet(url,elemento_retorno,exibe_carregando){/******* ajaxGet - Coloca o retorno de uma url em um elemento qualquer* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.* Versão: 1.2 - 20/04/2006* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br* Parametros:* url: string; elemento_retorno: object||string; exibe_carregando:boolean*  - Se elemento_retorno for um elemento html (inclusive inputs e selects),*    exibe o retorno no innerHTML / value / options do elemento*  - Se elemento_retorno for o nome de uma variavel*    (o nome da variável deve ser declarado por string, pois será feito um eval)*    a função irá atribuir o retorno à variável ao receber a url.*******/    var ajax1 = pegaAjax();    if(ajax1){        url = antiCacheRand(url)        ajax1.onreadystatechange = ajaxOnReady        ajax1.open("GET", url ,true);        ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");        ajax1.setRequestHeader("Cache-Control", "no-cache");        ajax1.setRequestHeader("Pragma", "no-cache");        if(exibe_carregando){ put("Carregando ...")    }        ajax1.send(null)        return true;    }else{        return false;    }    function ajaxOnReady(){        if (ajax1.readyState==4){            if(ajax1.status == 200){                var texto=ajax1.responseText;                if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");                //texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp                put(texto);                extraiScript(texto);            }else{                if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}            }            ajax1 = null        }else if(exibe_carregando){//para mudar o status de cada carregando                put("Carregando ..." )        }		    }    function put(valor){ //coloca o valor na variavel/elemento de retorno        if((typeof(elemento_retorno)).toLowerCase()=="string"){ //se for o nome da string            if(valor!="Falha no carregamento"){                eval(elemento_retorno + '= unescape("' + escape(valor) + '")')            }        }else if(elemento_retorno.tagName.toLowerCase()=="input"){            valor = escape(valor).replace(/\%0D\%0A/g,"")            elemento_retorno.value = unescape(valor);        }else if(elemento_retorno.tagName.toLowerCase()=="select"){                    select_innerHTML(elemento_retorno,valor)        }else if(elemento_retorno.tagName){            elemento_retorno.innerHTML = valor;            //alert(elemento_retorno.innerHTML)        }    }    function pegaAjax(){ //instancia um novo xmlhttprequest        //baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original        if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}        var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];        for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }        return null;    }    function httpStatus(stat){ //retorna o texto do erro http        switch(stat){            case 0: return "Erro desconhecido de javascript";            case 400: return "400: Solicitação incompreensível"; break;            case 403: case 404: return "404: Não foi encontrada a URL solicitada"; break;            case 405: return "405: O servidor não suporta o método solicitado"; break;            case 500: return "500: Erro desconhecido de natureza do servidor"; break;            case 503: return "503: Capacidade máxima do servidor alcançada"; break;            default: return "Erro " + stat + ". Mais informações em http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html"; break;        }    }    function antiCacheRand(aurl){        var dt = new Date();        if(aurl.indexOf("?")>=0){// já tem parametros            return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());        }else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}    }	}function select_innerHTML(objeto,innerHTML){/******* select_innerHTML - altera o innerHTML de um select independente se é FF ou IE* Corrige o problema de não ser possível usar o innerHTML no IE corretamente* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.* Versão: 1.0 - 06/04/2006* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br* Parametros:* objeto(tipo object): o select a ser alterado* innerHTML(tipo string): o novo valor do innerHTML*******/    objeto.innerHTML = ""    var selTemp = document.createElement("micoxselect")    var opt;    selTemp.id="micoxselect1"    document.body.appendChild(selTemp)    selTemp = document.getElementById("micoxselect1")    selTemp.style.display="none"    if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto        innerHTML = "<option>" + innerHTML + "</option>"    }    innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")    selTemp.innerHTML = innerHTML    for(var i=0;i<selTemp.childNodes.length;i++){        if(selTemp.childNodes[i].tagName){            opt = document.createElement("OPTION")            for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){                opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))            }            opt.value = selTemp.childNodes[i].getAttribute("value")            opt.text = selTemp.childNodes[i].innerHTML            if(document.all){ //IEca                objeto.add(opt)            }else{                objeto.appendChild(opt)            }                            }        }    document.body.removeChild(selTemp)    selTemp = null}function extraiScript(texto){//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum//http://forum.imasters.com.br/index.php?showtopic=165277&    // inicializa o inicio ><    var ini = 0;    // loop enquanto achar um script    while (ini!=-1){        // procura uma tag de script        ini = texto.indexOf('<script', ini);        // se encontrar        if (ini >=0){            // define o inicio para depois do fechamento dessa tag            ini = texto.indexOf('>', ini) + 1;            // procura o final do script            var fim = texto.indexOf('</script>', ini);            // extrai apenas o script            codigo = texto.substring(ini,fim);            // executa o script            //eval(codigo);            /**********************            * Alterado por Micox - micoxjcg@yahoo.com.br            * Alterei pois com o eval não executava funções.            ***********************/            novo = document.createElement("script")            novo.text = codigo;            document.body.appendChild(novo);        }    }}

danielmark · Dezembro 3, 2009

Óh Fera...

Usando AJAX

Primeiro você coloca isso no LINK

// esse 'LOCAL' eh onde você quer que abra a tal pagina... depois do Carregando beleza ? Tipo uma DIV grande... você que ve ae.
<a href="#" onclick="ajaxGet('pagina.html',document.getElementById('LOCAL'),true)">

E no mesmo arquivo, você chama o arquivo que tah o AJAX.

<script src="js/micoxAjax.js?12" type="text/javascript" language="javascript"></script>

e o codigo do AJAX eh esse, micoxAjax.js?12

function ajaxGet(url,elemento_retorno,exibe_carregando){/******* ajaxGet - Coloca o retorno de uma url em um elemento qualquer* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.* Versão: 1.2 - 20/04/2006* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br* Parametros:* url: string; elemento_retorno: object||string; exibe_carregando:boolean*  - Se elemento_retorno for um elemento html (inclusive inputs e selects),*    exibe o retorno no innerHTML / value / options do elemento*  - Se elemento_retorno for o nome de uma variavel*    (o nome da variável deve ser declarado por string, pois será feito um eval)*    a função irá atribuir o retorno à variável ao receber a url.*******/    var ajax1 = pegaAjax();    if(ajax1){        url = antiCacheRand(url)        ajax1.onreadystatechange = ajaxOnReady        ajax1.open("GET", url ,true);        ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");        ajax1.setRequestHeader("Cache-Control", "no-cache");        ajax1.setRequestHeader("Pragma", "no-cache");        if(exibe_carregando){ put("Carregando ...")    }        ajax1.send(null)        return true;    }else{        return false;    }    function ajaxOnReady(){        if (ajax1.readyState==4){            if(ajax1.status == 200){                var texto=ajax1.responseText;                if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");                //texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp                put(texto);                extraiScript(texto);            }else{                if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}            }            ajax1 = null        }else if(exibe_carregando){//para mudar o status de cada carregando                put("Carregando ..." )        }		    }    function put(valor){ //coloca o valor na variavel/elemento de retorno        if((typeof(elemento_retorno)).toLowerCase()=="string"){ //se for o nome da string            if(valor!="Falha no carregamento"){                eval(elemento_retorno + '= unescape("' + escape(valor) + '")')            }        }else if(elemento_retorno.tagName.toLowerCase()=="input"){            valor = escape(valor).replace(/\%0D\%0A/g,"")            elemento_retorno.value = unescape(valor);        }else if(elemento_retorno.tagName.toLowerCase()=="select"){                    select_innerHTML(elemento_retorno,valor)        }else if(elemento_retorno.tagName){            elemento_retorno.innerHTML = valor;            //alert(elemento_retorno.innerHTML)        }    }    function pegaAjax(){ //instancia um novo xmlhttprequest        //baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original        if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}        var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];        for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }        return null;    }    function httpStatus(stat){ //retorna o texto do erro http        switch(stat){            case 0: return "Erro desconhecido de javascript";            case 400: return "400: Solicitação incompreensível"; break;            case 403: case 404: return "404: Não foi encontrada a URL solicitada"; break;            case 405: return "405: O servidor não suporta o método solicitado"; break;            case 500: return "500: Erro desconhecido de natureza do servidor"; break;            case 503: return "503: Capacidade máxima do servidor alcançada"; break;            default: return "Erro " + stat + ". Mais informações em http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html"; break;        }    }    function antiCacheRand(aurl){        var dt = new Date();        if(aurl.indexOf("?")>=0){// já tem parametros            return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());        }else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}    }	}function select_innerHTML(objeto,innerHTML){/******* select_innerHTML - altera o innerHTML de um select independente se é FF ou IE* Corrige o problema de não ser possível usar o innerHTML no IE corretamente* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.* Versão: 1.0 - 06/04/2006* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br* Parametros:* objeto(tipo object): o select a ser alterado* innerHTML(tipo string): o novo valor do innerHTML*******/    objeto.innerHTML = ""    var selTemp = document.createElement("micoxselect")    var opt;    selTemp.id="micoxselect1"    document.body.appendChild(selTemp)    selTemp = document.getElementById("micoxselect1")    selTemp.style.display="none"    if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto        innerHTML = "<option>" + innerHTML + "</option>"    }    innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")    selTemp.innerHTML = innerHTML    for(var i=0;i<selTemp.childNodes.length;i++){        if(selTemp.childNodes[i].tagName){            opt = document.createElement("OPTION")            for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){                opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))            }            opt.value = selTemp.childNodes[i].getAttribute("value")            opt.text = selTemp.childNodes[i].innerHTML            if(document.all){ //IEca                objeto.add(opt)            }else{                objeto.appendChild(opt)            }                            }        }    document.body.removeChild(selTemp)    selTemp = null}function extraiScript(texto){//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum//http://forum.imasters.com.br/index.php?showtopic=165277&    // inicializa o inicio ><    var ini = 0;    // loop enquanto achar um script    while (ini!=-1){        // procura uma tag de script        ini = texto.indexOf('<script', ini);        // se encontrar        if (ini >=0){            // define o inicio para depois do fechamento dessa tag            ini = texto.indexOf('>', ini) + 1;            // procura o final do script            var fim = texto.indexOf('</script>', ini);            // extrai apenas o script            codigo = texto.substring(ini,fim);            // executa o script            //eval(codigo);            /**********************            * Alterado por Micox - micoxjcg@yahoo.com.br            * Alterei pois com o eval não executava funções.            ***********************/            novo = document.createElement("script")            novo.text = codigo;            document.body.appendChild(novo);        }    }}

Hum esta dando erro!

no js micoxAjax.js?12

voce sabe o que pode ser ?

Dee · Dezembro 3, 2009

Posta o erro...

Mas deu erro lah, pq você errou na pagina principal.

danielmark · Dezembro 3, 2009

da erro na pagina!

logo abaixo o erro!

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2)

Carimbo de data/hora: Thu, 3 Dec 2009 17:01:52 UTC

Mensagem: Identificador esperado

Linha: 18

Caractere: 15

Código: 0

URI: http://127.0.0.1/web_conv/Scripts/micoxAjax.js

Mensagem: Objeto esperado

Linha: 14

Caractere: 1

Código: 0

URI: http://127.0.0.1/web_conv/teste.html

Henrique Barcelos · Dezembro 3, 2009

../../../public/style_emoticons/default/seta.gif http://forum.imaster...16-classe-ajax/

Veja como usar, depois, no css, faça algo assim:
#myAjaxLoading {
 background: #069;
 color: #FFF;
 padding: 2px 10px;
 font-weight: bold;
}

Fez o que eu sugeri?

você precisa copiar o código e salvar em um arquivo JS e incluir na sua página (assim como faz com jQuery)...

danielmark · Dezembro 4, 2009

../../../public/style_emoticons/default/seta.gif http://forum.imaster...16-classe-ajax/

Veja como usar, depois, no css, faça algo assim:
#myAjaxLoading {
 background: #069;
 color: #FFF;
 padding: 2px 10px;
 font-weight: bold;
}
Fez o que eu sugeri?

você precisa copiar o código e salvar em um arquivo JS e incluir na sua página (assim como faz com jQuery)...

Sim eu fiz porem quando eu executa a pagina esta dando erro!

voce tem os arquivos js e um html para que eu possa testar com este modelo que voce passou ?

Henrique Barcelos · Dezembro 5, 2009

Vou dar um upload aqui e te passo o link...

Henrique Barcelos · Dezembro 5, 2009

http://www.comp.ufscar.br/~henriquejpb/Teste/

danielmark · Dezembro 7, 2009

http://www.comp.ufscar.br/~henriquejpb/Teste/

Rick.hjpbarcelos, Vlw.. mesmo deu certo!

era alguma coisa no js mesmo!

Agora vou trabalhar em cima disso!

Abraços...

gkyves · Dezembro 10, 2009

http://www.comp.ufscar.br/~henriquejpb/Teste/

Ou mano na pagina.php e soh escrever o conteudo normal

tpw que nem tu fez colocou um img pra ser carregada soh que no meu caso nao esta dando certo

olha soh

www.agenciagsk.com/teste

e o html da index tah a mesma coisa olha ai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Teste</title>
		<style type="text/css">
			body {
				font: bold 10pt Arial, Helvetica, sans-serif;
			}
			#myAjaxLoading {
				background: #069;
				color: #FFF;
				padding: 2px;
				text-align: center;
				position: absolute;
				width: 100px;
				top: 0;
				left: 50%;
				margin-left: -50px;
			}
		</style>
		<script type="text/javascript" src="myAjax.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var link = document.getElementById("click");
				link.onclick = function(){
					var ajax = new myAjax();
					ajax.load("pagina.ohp", "teste");
					return false;
				}
			}
		</script>

	</head>
	<body>
		<a id="click" href="#">Click Me</a>
		<div id="teste"></div>
	</body>
</html>

ops ops...

foi mau tah dando certo mermo foi erro de digitação

olha ai

pagina.ohp e eh pagina.php

Arquivado

[Resolvido] Mensagem carregando...

Recommended Posts

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielmark 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gkyves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Fóruns

Tempo Real

Informação importante