Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jadsonlucena

[Resolvido] Como evitar que uma página com função ajax volte ao i

Por , em Javascript

Recommended Posts

jadsonlucena    0

jadsonlucena
Postado

Galera aqui estou eu tentando resolver meu problema.

 

Vejamos eu quero que a minha página com função ajax não retorne para o início quando ela for atualizada.

para isto eu quero utilizar um script que está citado no 2 exemplo abaixo.

O que realmente estou pedindo é que alguem de vcs possa me dar a sintaxe do 2 exemplo ou mesmo uma explicação melhor sobre o código.

 

 

 

 

 

[table=exemplo 1:]Este é meu script ajax que utilizo para carregar paginas em div sicrônicamente.

 

$(function(){
      $("#carregando").hide();
      
         $("div#botaoinicio a").click(function(){
            pagina = "arquivos/"+$(this).attr('href')
            
            $("#carregando").ajaxStart(function(){
               $(this).show()
               })
            $("#carregando").ajaxStop(function(){
               $(this).hide();
               
            })
            
            $("#conteudo").load(pagina);
            return false;
         })
})

 

[table=exemplo 2:]Esta é a função que não deixa a página voltar ao início quando for atualizada.[table=esta é a tabela que eu gostaria de usar.]Na verdade, ai é apenas javascript puro..

 

como essa tem sido uma dúvida recorrente, vou deixar um exemplo:

<html>
<head>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function pega_arq( url ){
        var file = url.split('#');
        return ( file[1] ) ? file[1]+'.html' : 'home.html';
}
function getHTTPObject(){
        if(window.XMLHttpRequest){
                return new XMLHttpRequest();
        }else if(window.ActiveXObject){
                var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
                for(var i = 0; i < prefixes.length; i++){
                        try     {
                                return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                        } catch (e) {}
                }
        }
}
var xmlHttp = getHTTPObject();
function abre( arq ){
        xmlHttp.open("GET", arq,true);
        xmlHttp.onreadystatechange = function(){
                if (xmlHttp.readyState == 4){
                        id('content').innerHTML = xmlHttp.responseText;
                }               
        }
        xmlHttp.send( null );
}
window.onload = function(){
        var as = document.getElementsByTagName('a');

        for( var i=0; i<as.length; i++ ){
                as[i].onclick = function(){
                        abre( pega_arq( this.href ) );
                }
        }
        abre( pega_arq( document.location.href ) );
}
</script>
</head>
<body>
        
        <a href="#contato">Contato</a>
        <a href="#missao-valores">Missão, Valores</a>
        <div id="content">
        </div><!-- /content -->
</body>
</html>

 

veja a URL, vai mudar..

quando você acessa:

localhost/ e ai abre a home.html, pois tem um if ternário que inseri, para testar se o split retornou algo.

localhost/#contato e ai abre o contato.html, e não acontece 'refresh' na página, pois estou alterando a URL do documento atual, trocando apenas após a #

 

Se você fechar o navegador, ou abrir outro, verá que graças a chamada que fiz:

abre( pega_arq( document.location.href ) );

abrirá na página que a # tiver marcando.[/table][/table][/table]

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, juro juro que não consigo entender a tua dúvida.

 

missao-valores.html

<h1>Missao E Valores</h1>
			
			<p>Conteudo de missao e valores</p>
contato.html
<h1>Contato</h1>
			
			<p>Pagina de contato</p>
home.html
<h1>Hello World!</h1>

em funcionamento:

http://wbruno.com.br/scripts/pagina.html

 

 

comentado:

/* função apelido, apenas para simplificar a chamada do getElementById() */
function id( el ){
	return document.getElementById( el );
}
/* função responsável por escolher qual arquivo incluir*/
function pega_arq( url ){//recebe a URL da página como parâmetro
	var file = url.split('#');//para retirar o sinal de # da string
	return ( file[1] ) ? file[1]+'.html' : 'home.html'; //caso não tenha nada na url, retorna a home para ser incluida
}
function getHTTPObject(){//não vou explicar este, pois é apenas o instanciamento do objeto XHMLHttpRequest
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
		for(var i = 0; i < prefixes.length; i++){
			try {
				return new ActiveXObject(prefixes[i] + ".XMLHTTP");
			} catch (e) {}
		}
	}
}
var xmlHttp = getHTTPObject();//coloca o objeto numa variavel
function abre( arq ){//função que chamaremos para abrir os arquivos
	xmlHttp.open("GET", arq,true);
	xmlHttp.onreadystatechange = function(){
		if (xmlHttp.readyState == 4){//caso a requisição tenha dado certo
			id('content').innerHTML = xmlHttp.responseText;//coloca na div #content o retorno
		}
	}
	xmlHttp.send( null );
}
window.onload = function(){//espera o documento terminar de carregar
	var as = document.getElementsByTagName('a');//as recebe um array com todas as tags <a> da pagina

	for( var i=0; i<as.length; i++ ){//loop
		as[i].onclick = function(){//evento onclick() de cada tag <a>
			abre( pega_arq( this.href ) );//chama a função abre, passando o arquivo que deverá ser mostrado
		}
	}
	abre( pega_arq( document.location.href ) );// assim que carrega o documento, carrega o arquivo que estiver como ancora na url
}

mais fácil você pegar um trecho que não tenha entendido e perguntar..

sou ruim para explicar assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jadsonlucena    0

jadsonlucena
Postado

desculpe-me William Bruno por eu não saber me expressar direito..

E agradeço por me dar as explicações necessárias para que eu compreendesse este código.

 

 

Sé não for pedir muito, eu gostaria que você utilizasse o meu código do (exemplo 1) porque os links estão em uma div específica que é bastante importante para mim, e ao trocar de página aparece um gift de Loading. E gostaria que você fizesse com que o mesmo tivesse a função do (exemplo 2); que seria a função de não deixar a pagina retornar para o início quando for atualizada.

 

Eu estou pedindo este favor, por eu ser leigo nesta área. E estou muito agradecido pela força..

 

"Estarei fazendo meu primeiro curso de web Designi no ano que vem, mais enquanto isto estarei aqui tirando as minhas duvidas.."

 

 

Atenciosamente: jádson

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, acontece o seguinte, você não está perguntando, você está pedindo para que eu FAÇA para você

 

desculpe, mas realmente este não é o intuito do fórum.

tente fazer, poste dúvidas, pesquise, estude...

 

mas o meu trabalho aqui é voluntário, não tenho obrigação nenhuma de desenvolver scripts de graça.

você pode aguardar que alguma alma caridosa, resolva te entregar o teu trabalho sem cobrar, ou pode ir a luta e estudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jadsonlucena    0

jadsonlucena
Postado

Sim!!! eu consegui um código [ajax com jquery] melhor para a página não voltar para o início quando for atualizada por ela fazer um histórico automático..

 

Código:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });
	
        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

 

 

link do plugin jquery history:

 

Link do jquery history

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito