Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou a usar ajax em um site. Funciona perfeitamente.
Porém ao colocar mais links ou scripts dentro destas páginas, estes são ignorados.
Exemplo: Adciono um link na página do conteúdo que será carregado pelo ajax, ele aparece, porém ao clicar nele, nada acontece, só o endereço da parte superior é atualizado.
O Script que uso:
function id( el ){
return document.getElementById( el );
}
function pega_arq( url ){
var file = url.split('#');
return ( file[1] ) ? file[1]+'.html' : 'sonpags/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 ) );
}Sou leigo em javascript.
Gostaria apenas de atualizar os dados da div diretamente dos links do conteudo carregado.
Olha minha página Principal :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seja Bem Vindo! Butterfly Tour</title>
<link href="template/favicon.ico" rel="shortcut icon" />
<script src="css-js/index.js" type="text/javascript"></script>
</head>
<style type="text/css">
@import url(css-js/index.css);
</style>
<body>
<div class="banner"><div class="logo"></div></div>
<div class="menu">
<ul class="MenuBarHorizontal">
<li id="espaco"><a href="#sonpags/home">Início</a></li>
<li><a href="#sonpags/viagens">Nossas Viagens</a></li>
<li><a href="#sonpags/fretamentos">Fretamentos</a></li>
<li><a href="#sonpags/imagens">Imagens</a></li>
<li><a href="#sonpags/contato">Entre em contato</a></li>
<li><a href="#sonpags/empresa">A Empresa</a></li>
<li><a href="#sonpags/versao">Versão do site</a></li>
</ul>
</div>
<div class="main">
<div class="height"></div>
<div class="extras">
<div id="title">Viagens Ativas:</div>
<div class="Xtitulo">Carnaval</div>
<div class="Xconteudo">
<p>O Carnaval Do Rio será de tirar o fôlego</p>
<p>asda</p>
<p>sda</p>
<p>sdasd</p>
<p>asd</p>
<p>sd</p>
<p>ds</p>
<p>das</p>
<p>dasd</p>
<p>asd</p>
<p>asd asd asd as dasd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd as asd</p>
<p> </p>
</div>
<div class="Xtitulo">Carnaval</div>
<div class="Xconteudo">O Carnaval Do Rio será de tirar o fôlego</div>
<div class="Xtitulo">Carnaval</div>
<div class="Xconteudo">O Carnaval Do Rio será de tirar o fôlego</div>
<div class="Xtitulo">Carnaval</div>
<div class="Xconteudo">O Carnaval Do Rio será de tirar o fôlego</div>
</div>
<div class="conteudo" id="content"><a href="#sonpags/empresa">as</a></div>
<div class="height"></div>
<div class="direitos">©Butterfly Tour - Todos os direitos reservados.</div>
<div class="height"></div>
</div>
</body>
</html>Código do conteudo:
<div class="height"></div>
<div class="div1">
<div class="cabec">Fazemos Fretamentos...</div>
<div class="cont">
<p>A BUTTERFLY Tour oferece também transporte de funcionarios, romaria, pescaria, transporte de estudantes, com ônibus de varios tipos, a necessidade desejada...</p>
<p><div class="link"><a href="x">Saiba Mais...</a></div></p>
</div>
</div>
<div class="div2">
<div class="cabec">Viagens</div>
<div class="cont">
<p>A Butterfly Tour oferece multiplos destinos dependendo do objetivo do cliente. Temos pacotes para férias disponilizados durante o ano; Oferecemos viagens comerciais semanalmente (destino: São Paulo); etc. </p>
<p>As Viagens ativas estão localizadas na área lateral direita do site.</p>
<p><div class="link"><a href="x">Saiba Mais...</a></div></p>
</div>
</div>
<div class="div3">
<div class="cabec">Veja a descrição da nossa empresa...</div>
<div class="cont">
<p>A BUTTERFLY Tour, empresa constituida a 18 anos, é especializada no ramo de turismo comercial, sempre dando suporte aos empresários mineiros com conforto e segurança...</p>
<p><div class="link"><a href="#sonpags/empresa">Saiba Mais...</a></div></p>
</div>
</div>
<div class="height"></div>Não há scripts na pagino do conteudo.
Só desejo carregar na própria content(div do ajax) os links que ela apresenta.
Link em vermelho.
<a href="#sonpags/empresa">Saiba Mais...</a>
cara, provavelmente, pq o evento não foi atrelado ao <a>
já que qndo você ta trazendo essa página interna, o window.onload já acabou.
ou você faz inline:
<a href="#sonpags/empresa" onclick="abre( pega_arq( this.href ) );">Saiba Mais...</a>
ou você roda outro loop pelos <a> do conteudo que você trouxe, adicionando o evento.Muito Obrigado!!!!!!!!!!!!!.
Como disse sei javascript, em breve vou estudar, depois que terminar de aprender PHP.
MUITO MUITO OBRIGADO!
Javascript não funciona em páginas carregadas por Ajax que eu saiba.
Se você colocou alguma função JS na página carregada por Ajax, tire de lá coloque na página principal.
Rode!