[Resolvido] Problema com função para carregar página

Buthy · Maio 26, 2011

Então, tem player de música no site, então optei por usar AJAX.

Utilizo essa função no meu index.html para os ítens do menu do topo:

<script type="text/javascript">
function id( el ){
       return document.getElementById( el );
}
function pega_arq( url ){
       var file = url.split('#');
       return ( file[1] ) ? file[1] : 'inicial.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('page').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>

Links:
<a href="#inicial.html">Inicial</a>
<a href="#biografia.html">Biografia</a>

Ela funciona beleza, só carrega a página na div page.

Dai dentro dessa div page, carrega, inicialmente, o arquivo inicial.html

E navegando pelo menu do topo, você clica em Biografia, por exemplo, e dentro de Biografia tem outros links

Aí que está o problema!

Esses links dentro da página biografia.html não abrem corretamente!

Como eu faço pra esses links abrirem?

Precisa outra função dentro do arquivo biografia.html? Se precisa, que função seria essa?

Se puderem me ajudar, é meio urgente :S

Valeu

William Bruno · Maio 27, 2011

O problema é que as novas tags <a> que vierem com o ajax, ainda não tem o evento onclick atrelado a elas.

você precisa fazer um parser desse html recebido, para fazer um bind do evento com a function nesses novos elementos.

Buthy · Maio 27, 2011

hmmm... o que seria parser, bind? :S

se não me engano essa função que eu usei foi você que postou no fórum, certo?

Buthy · Maio 30, 2011

Como eu faço um parser do html recebido e como fazer um bind do evento? :S

Dei uma pesquisada e não encontrei muita coisa

William Bruno · Maio 31, 2011

Fiz um post para resolver esta questão:

http://www.wbruno.com.br/blog/2011/05/31/atrelar-evento-em-elementos-nao-existiam-dom/

Buthy · Maio 31, 2011

não entendi muito do código que você postou

mas vendo a demonstracao online deu pra ver que é o que eu quero fazer no meu site (eu acho)

só nao me localizei muito em como usar aquele codigo no meu site...

a função que eu tenho no index.html é essa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

 <title>xxxxxxxxxxxxxxx</title>

 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

 <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

 <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
 <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv" />
 <link rel="stylesheet" type="text/css" href="css/inicial.css" media="screen, projection, tv " />

 <link rel="stylesheet" href="css/nivo-slider-style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />

 <link media="screen" rel="stylesheet" href="css/colorbox.css" />

 <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

 <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>

 <script src="js/jquery.colorbox.js"></script>

<script type="text/javascript">
// função para carregar páginas em AJAX
function id( el ){
       return document.getElementById( el );
}
function pega_arq( url ){
       var file = url.split('#');
       return ( file[1] ) ? file[1] : 'inicial.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('page').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>

<script type="text/javascript">
$(window).load(function() {
   $('#slider').nivoSlider({
       effect:'fade', // Specify sets like: 'fold,fade,sliceDown,random'
       slices:40, // For slice animations
       boxCols: 8, // For box animations
       boxRows: 4, // For box animations
       animSpeed:800, // Slide transition speed
       pauseTime:7000, // How long each slide will show
       startSlide:0, // Set starting Slide (0 index)
       directionNav:true, // Next & Prev navigation
       directionNavHide:true, // Only show on hover
       controlNav:false, // 1,2,3... navigation
       controlNavThumbs:false, // Use thumbnails for Control Nav
       controlNavThumbsFromRel:false, // Use image rel for thumbs
       controlNavThumbsSearch: '.jpg', // Replace this with...
       controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
       keyboardNav:false, // Use left & right arrows
       pauseOnHover:true, // Stop animation while hovering
       manualAdvance:false, // Force manual transitions
       captionOpacity:0.8, // Universal caption opacity
       prevText: 'Anterior', // Prev directionNav text
       nextText: 'Próximo', // Next directionNav text
       beforeChange: function(){}, // Triggers before a slide transition
       afterChange: function(){}, // Triggers after a slide transition
       slideshowEnd: function(){}, // Triggers after all slides have been shown
       lastSlide: function(){}, // Triggers when last slide is shown
       afterLoad: function(){} // Triggers when slider has loaded
   });
});
</script>

<script>
	$(document).ready(function(){
		//Examples of how to assign the ColorBox event to elements
		$("a[rel='example1']").colorbox();
		$("a[rel='example2']").colorbox({transition:"fade"});
		$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
		$("a[rel='example4']").colorbox({slideshow:true});
		$(".example5").colorbox();
		$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
		$(".example7").colorbox({width:"20%", height:"25%", iframe:true});
		$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
		$(".example9").colorbox({
			onOpen:function(){ alert('onOpen: colorbox is about to open'); },
			onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
			onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
			onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
			onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
		});

		//Example of preserving a JavaScript event for inline calls.
		$("#click").click(function(){ 
			$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
			return false;
		});
	});
</script>

............
............

<body>

<a href="#inicial.html">Home</a>
<a href="#biografia.html">Biografia</a>
<a href="#agenda.html">Agenda</a>

<div id="page">

</div>

</body>

......

a função que eu estou usando é a mesma que você postou, com excessão dessa parte:

function pega_arq( url ){
       var file = url.split('#');
       return ( file[1] ) ? file[1] : 'inicial.html';
}

dai o biografia.html que fica dentro da <div id="page"></div>:

<div class="width100 floatLeft leftColumn" id="divBackground">

   <div id="barraNav">

   <a href="inicial.html">Home</a> <img src="images/nav_separador.png" border="0" /> <a href="biografia.html">Biografia</a></span> <img src="images/nav_separador.png" border="0" /> <a href="agenda.html">Agenda</a></span>

   </div>
	<div style="line-height:40px;"><br /></div>
   <div id="divConteudoTopo"></div>



       <div id="divConteudoMeio">

       	<div style="padding-left:10px; padding-right:10px;">

             <h1>BIOGRAFIA</h1>

             Aqui vai a biografia.
             <br /><Br /><br /><br /><br /><br /><br /><br /><br /><br /><Br /><br /><br /><br /><br /><br /><br /><br />

           </div>  

       </div>

   <div id="divConteudoBaixo"></div>

</div>

dai eu nao entendi onde eu coloco esse codigo que você postou...

e como eu modifico ele...

<script type="text/javascript">  
   window.onload = function(){  
       id('teste').innerHTML = '<span id="ae">aeee</span>';  

       attach( id('ae'), teste );  
   }  

   function attach( el, f ){  
       if( window.addEventListener )  
           el.addEventListener("click", f, false);  
       else  
           el.attachEvent("click", f );  
   }  
   function id( el ){  
       return document.getElementById( el );  
   }  
   function teste(){  
       alert( 'ae' );  
   }
   var as = id('content').getElementsByTagName('a');  
   for( var i=0; i<as.length; i++ ){  
       var arq = pega_arq( as[i].href );  
       if( window.addEventListener )  
           as[i].addEventListener( 'click', function(){ abre( arq ); }, false );  
       else  
           as[i].attachEvent( 'click', function(){ abre( arq ); } );  
   }    
   </script>

Como que eu adaptaria ele ao meu site??

William Bruno · Maio 31, 2011

você viu a demonstração ?

apenas troque:

function abre( arq ){
       xmlHttp.open("GET", arq,true);
       xmlHttp.onreadystatechange = function(){
               if (xmlHttp.readyState == 4){
                       id('page').innerHTML = xmlHttp.responseText;
               }               
       }
       xmlHttp.send( null );
}

por:

function abre( arq ){
xmlHttp.open("GET", arq,true);
xmlHttp.onreadystatechange = function(){
	if (xmlHttp.readyState == 4){
		id('content').innerHTML = xmlHttp.responseText;


		var as = id('content').getElementsByTagName('a');
		for( var i=0; i<as.length; i++ ){
			var arq = pega_arq( as[i].href );
			if( window.addEventListener )
				as[i].addEventListener( 'click', function(){ abre( arq ); }, false );
			else 
				as[i].attachEvent( 'click', function(){ abre( arq ); } );
		}
	}
}
xmlHttp.send( null );
}

é isso, entendeu ? você não deveria ter 'catado' os códigos do post, mas sim ter lido eles, entendido e testado isoladamente.

convém notar que o teu biografia.html, deve ter os links desta maneira:

<a href="#inicial">Home</a> <img src="images/nav_separador.png" border="0" /> 
<a href="#biografia">Biografia</a> <img src="images/nav_separador.png" border="0" /> 
<a href="#agenda">Agenda</a>

Buthy · Maio 31, 2011

Ok, eu fiz isso que você falou...

Só que deu um negócio muito estranho eheh

http://www.grupodeixestar.com.br/index2.html

Quando navega pelo menu do topo fica normal (home, biografia e agenda)

Agora quando navega pelo submenu (que eu criei só pra testar isso) ficou "bagunçado"

Quando você clica no submenu no item Biografia, ele vai pra biografia. Daí, no submenu ainda, você clica em biografia denovo, e ele vai para agenda, Dai você clica em inicial, e ele vai pra biografia denovo!

Tem essa mudança no código, não sei se tem a ver, mas no seu código está assim:

function pega_arq( url ){  
       var file = url.split('#');  
       return ( file[1] ) ? file[1]+'.html' : 'home.html';  
}

E eu alterei para ficar assim:

function pega_arq( url ){
       var file = url.split('#');
       return ( file[1] ) ? file[1] : 'inicial.html';
}

Alterei porque vão ter arquivos .php, .html e também vao ser passadas informações pela url (?id=$id) e etc...

Se conseguir dar uma olhada... Valeu!

Buthy · Maio 31, 2011

e plugins jquery tem a ver não funcionar por causa dessa função ajax? :S

William Bruno · Maio 31, 2011

sim, é oque eu falei no começo.

javascript carregado com ajax não funciona, e os teus novos elementos não terão as funções atreladas.

Buthy · Maio 31, 2011

Bahhh! então nem sei porque to usando Ajax, porque tem várias coisas em Jquery...

Achava que a melhor opcao pro player de música seria Ajax...

O que eu posso usar para que a música continue tocando enquanto navega pelo site, sem ser em frames, pop ups e ajax??

William Bruno · Maio 31, 2011

sem ser em frames, pop ups e ajax??

não sobrou nada.. você excluiu todas as possibilidades.

Mas se você já está usando jQuery, então poderia fazer o carregamento com jQuery tb:

http://wbruno.siteprofissional.com/blog/2011/05/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

Ainda assim, você terá os problemas com os plugins, resta pesquisar bastante para conseguir fazer funcionar.

Buthy · Junho 1, 2011

Então, usei um outro do teu blog.. Esse: http://www.wbruno.com.br/blog/2011/03/30/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/

eu fiz o seguinte:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

 <title>Grupo DeixeStar - site oficial</title>

 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

 <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
 <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv" />
 <link rel="stylesheet" type="text/css" href="css/inicial.css" media="screen, projection, tv " />

 <link rel="stylesheet" href="css/nivo-slider-style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />

 <link media="screen" rel="stylesheet" href="css/colorbox.css" />

 <link media="screen" rel="stylesheet" href="css/jquery.tweet.css" />

 <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

 <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>

 <script src="js/jquery.colorbox.js"></script>

 <link media="screen" rel="stylesheet" href="css/jquery.tweet.css" />

 <script src="js/jquery.tweet.js"></script>

 <script type='text/javascript'>
   $(function(){
     $("#fromtwo").tweet({
       avatar_size: 32,
       count: 5,
       username: ["buuthy", "DeixaOficial"],
       loading_text: "<center><br /><br /><br /><br /><br /><br /><br /><br /><strong>Carregando...</strong></center>",
       refresh_interval: 10
     });
   });
 </script>

 <script type="text/javascript">  
   $(document).ready(function(){  
       $("#abrirpag a").click(function( e ){  
           e.preventDefault();  
           var href = $( this ).attr('href');  
           if( $( this ).attr('target')=='_blank' )
		window.open( href );
		else
		$("#page").load( href + "#page");  
       });  
   });  
   </script>   

<script type="text/javascript">
$(window).load(function() {
   $('#slider').nivoSlider({
       effect:'fade', // Specify sets like: 'fold,fade,sliceDown,random'
       slices:40, // For slice animations
       boxCols: 8, // For box animations
       boxRows: 4, // For box animations
       animSpeed:800, // Slide transition speed
       pauseTime:7000, // How long each slide will show
       startSlide:0, // Set starting Slide (0 index)
       directionNav:true, // Next & Prev navigation
       directionNavHide:true, // Only show on hover
       controlNav:false, // 1,2,3... navigation
       controlNavThumbs:false, // Use thumbnails for Control Nav
       controlNavThumbsFromRel:false, // Use image rel for thumbs
       controlNavThumbsSearch: '.jpg', // Replace this with...
       controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
       keyboardNav:false, // Use left & right arrows
       pauseOnHover:true, // Stop animation while hovering
       manualAdvance:false, // Force manual transitions
       captionOpacity:0.8, // Universal caption opacity
       prevText: 'Anterior', // Prev directionNav text
       nextText: 'Próximo', // Next directionNav text
       beforeChange: function(){}, // Triggers before a slide transition
       afterChange: function(){}, // Triggers after a slide transition
       slideshowEnd: function(){}, // Triggers after all slides have been shown
       lastSlide: function(){}, // Triggers when last slide is shown
       afterLoad: function(){} // Triggers when slider has loaded
   });
});
</script>

<script>
	$(document).ready(function(){
		//Examples of how to assign the ColorBox event to elements
		$("a[rel='example1']").colorbox();
		$("a[rel='example2']").colorbox({transition:"fade"});
		$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
		$("a[rel='example4']").colorbox({slideshow:true});
		$(".example5").colorbox();
		$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
		$(".example7").colorbox({width:"20%", height:"25%", iframe:true});
		$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
		$(".example9").colorbox({
			onOpen:function(){ alert('onOpen: colorbox is about to open'); },
			onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
			onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
			onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
			onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
		});

		//Example of preserving a JavaScript event for inline calls.
		$("#click").click(function(){ 
			$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
			return false;
		});
	});
</script>

<script language="JavaScript">
<!-- Begin - função para "PreLoad" de imagens
image1 = new Image();
image1.src = "images/menuTopo/home_hover.jpg";
image2 = new Image();
image2.src = "images/menuTopo/biografia_hover.jpg";
image3 = new Image();
image3.src = "images/menuTopo/agenda_hover.jpg";
image4 = new Image();
image4.src = "images/menuTopo/novidades_hover.jpg";
image5 = new Image();
image5.src = "images/menuTopo/mural_hover.jpg";
image6 = new Image();
image6.src = "images/menuTopo/fotos_hover.jpg";
image7 = new Image();
image7.src = "images/menuTopo/videos_hover.jpg";
image8 = new Image();
image8.src = "images/menuTopo/downloads_hover.jpg";
image9 = new Image();
image9.src = "images/menuTopo/contato_hover.jpg";
image10 = new Image();
image10.src = "images/integrantes/001a.jpg";
image11 = new Image();
image11.src = "images/integrantes/002a.jpg";
image12 = new Image();
image12.src = "images/integrantes/003a.jpg";
image13 = new Image();
image13.src = "images/integrantes/004a.jpg";
// End --></script>

</head>

<body>

<div style="background-image:url(images/bg_topo.png); height:709px;">
<div id="player">
<div id="barraTopo">
 <object type="application/x-shockwave-flash" data="player.swf" width="240" height="20" id="dewplayer" flashvars="autostart=true&autoreplay=true"><param name="wmode" value="transparent"/><param name="movie" value="player.swf" /> <param name="flashvars" value="mp3=mp3/001.mp3|mp3/002.mp3|mp3/003.mp3&autostart=1&autoreplay=1" /> </object>
 </div>
</div>
<!-- CONTENT: Holds all site content except for the footer.  This is what causes the footer to stick to the bottom -->
<div id="content">

 <!-- HEADER: Holds title, subtitle and header images -->
 <div id="header">
     <a href="index.html"><img src="images/logo.png" border="0" /></a>
 </div>

 <div>

 <div id="sliderTopo">
   <div id="slider">
     <img src="images/slider/001.jpg" border="0"/>
     <img src="images/slider/002.jpg" border="0"/>
   </div>
 </div>
 <div class="integrantes">
 <a href="#"><img src="images/integrantes/001.jpg" onMouseOver="this.src='images/integrantes/001a.jpg'" onMouseOut="this.src='images/integrantes/001.jpg'" border="0"/></a><br />
 <a href="#"><img src="images/integrantes/002.jpg" onMouseOver="this.src='images/integrantes/002a.jpg'" onMouseOut="this.src='images/integrantes/002.jpg'" border="0"/></a><br />
 <a href="#"><img src="images/integrantes/003.jpg" onMouseOver="this.src='images/integrantes/003a.jpg'" onMouseOut="this.src='images/integrantes/003.jpg'" border="0"/></a><br />
 <a href="#"><img src="images/integrantes/004.jpg" onMouseOver="this.src='images/integrantes/004a.jpg'" onMouseOut="this.src='images/integrantes/004.jpg'" border="0"/></a>
 </div>

 </div>


 <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
 <div id="menuTopo">

 <div id="width">
   <span class="floatLeft">
   <div id="menuTopoLinks"><div id="abrirpag">
   <a href="inicial.html"><img src="images/menuTopo/home.jpg" onMouseOver="this.src='images/menuTopo/home_hover.jpg'" onMouseOut="this.src='images/menuTopo/home.jpg'" border="0"/></a>
   <a href="biografia.html"><img src="images/menuTopo/biografia.jpg" onMouseOver="this.src='images/menuTopo/biografia_hover.jpg'" onMouseOut="this.src='images/menuTopo/biografia.jpg'" border="0"/></a>
   <a href="agenda.html"><img src="images/menuTopo/agenda.jpg" onMouseOver="this.src='images/menuTopo/agenda_hover.jpg'" onMouseOut="this.src='images/menuTopo/agenda.jpg'" border="0"/></a>
   <a href="#"><img src="images/menuTopo/novidades.jpg" onMouseOver="this.src='images/menuTopo/novidades_hover.jpg'" onMouseOut="this.src='images/menuTopo/novidades.jpg'" border="0"/></a>
   <a href="#"><img src="images/menuTopo/mural.jpg" onMouseOver="this.src='images/menuTopo/mural_hover.jpg'" onMouseOut="this.src='images/menuTopo/mural.jpg'" border="0"/></a>
   <a href="#"><img src="images/menuTopo/fotos.jpg" onMouseOver="this.src='images/menuTopo/fotos_hover.jpg'" onMouseOut="this.src='images/menuTopo/fotos.jpg'" border="0"/></a>
   <a href="#"><img src="images/menuTopo/videos.jpg" onMouseOver="this.src='images/menuTopo/videos_hover.jpg'" onMouseOut="this.src='images/menuTopo/videos.jpg'" border="0"/></a>
   <a href="#"><img src="images/menuTopo/downloads.jpg" onMouseOver="this.src='images/menuTopo/downloads_hover.jpg'" onMouseOut="this.src='images/menuTopo/downloads.jpg'" border="0"/></a>
   <a href="#"><img src="images/menuTopo/contato.jpg" onMouseOver="this.src='images/menuTopo/contato_hover.jpg'" onMouseOut="this.src='images/menuTopo/contato.jpg'" border="0"/></a></div>
   </div>
   </span>

 </div>

 </div>

 <div id="page">
 <div class="width100 floatLeft leftColumn">

<div id="divMural">
   <img src="images/mural-box-tit.png" />
   </div>

   <div id="divAgenda">
   <img src="images/agenda-box-tit.png" />
</div>

   <div id="divFotos">
   <img src="images/fotos-box-tit.png" />
   </div>

   <div id="divVideos">
   <img src="images/videos-box-tit.png" />
   </div>

   <div id="divTwitter">
   <img src="images/twitter-box-tit.png" /><br />
   <div id='fromtwo' class="query"></div> 
   </div>

   <div id="divNovidades">
   <img src="images/novidades-box-tit.png" />
   </div>

   <div id="divPatrocinadores">
   <img src="images/patrocinadores-box-tit.png" />
   </div>

 </div>

</body>

</html>

biografia.html

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

<script type="text/javascript">  
   $(document).ready(function(){  
       $("#abrirpag a").click(function( e ){  
           e.preventDefault();  
           var href = $( this ).attr('href');  
           if( $( this ).attr('target')=='_blank' )
		window.open( href );
		else
		$("#page").load( href + "#page");  
       });  
   });  
   </script> 

<div class="width100 floatLeft leftColumn" id="divBackground">

   <div id="barraNav">
   <div id="abrirpag">        	
   <span style="margin-left:5px;"><img src="images/nav_separador.png" border="0" /> <a href="inicial.html">Home</a> <img src="images/nav_separador.png" border="0" /> <a href="biografia.html">Biografia</a></span> <img src="images/nav_separador.png" border="0" /> <a href="agenda.html">Agenda</a></span></div>

   </div>
	<div style="line-height:40px;"><br /></div>
   <div id="divConteudoTopo"></div>



       <div id="divConteudoMeio">

       	<div style="padding-left:10px; padding-right:10px;">

             <h1>BIOGRAFIA</h1>

             Aqui vai a biografia.
             <br /><Br /><br /><br /><br /><br /><br /><br /><br /><br /><Br /><br /><br /><br /><br /><br /><br /><br />

           </div>  

       </div>

   <div id="divConteudoBaixo"></div>

</div>

o resultado está aqui:

http://www.grupodeixestar.com.br/index2.html

Ele navega normalmente nas páginas.. com excessão desses problemas:

- as vezes parece que a página trava (deixa o computador pesado)

- quando você vai pra biografia e volta, o plugin jquery.twitter se repete

Desconfio que seja isos:

no index.html, dentro do body:

<div id="page">
<div class="width100 floatLeft leftColumn">

<div id="divMural">
   <img src="images/mural-box-tit.png" />
   </div>

   <div id="divAgenda">
   <img src="images/agenda-box-tit.png" />
</div>

   <div id="divFotos">
   <img src="images/fotos-box-tit.png" />
   </div>

   <div id="divVideos">
   <img src="images/videos-box-tit.png" />
   </div>

   <div id="divTwitter">
   <img src="images/twitter-box-tit.png" /><br />
   <div id='fromtwo' class="query"></div> 
   </div>

   <div id="divNovidades">
   <img src="images/novidades-box-tit.png" />
   </div>

   <div id="divPatrocinadores">
   <img src="images/patrocinadores-box-tit.png" />
   </div>
</div>

Daí quando você vai pra biografia, e clica em Home, ele carrega a página inicial.html, que é o mesmo código que está dentro da <div id="page"></div> no index.html

Talvez seja isso, não sei...

alguma idéia do que pode ser?

William Bruno · Junho 1, 2011

não traga nenhuma tag script nas paginas internas.

deixe tudo já carregado na principal (index).

Buthy · Junho 1, 2011

mas daí se eu deixo sem essa parte:

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

<script type="text/javascript">  
   $(document).ready(function(){  
       $("#abrirpag a").click(function( e ){  
           e.preventDefault();  
           var href = $( this ).attr('href');  
           if( $( this ).attr('target')=='_blank' )
		window.open( href );
		else
		$("#page").load( href + "#page");  
       });  
   });  
   </script>

se essa parte não fica dentro das páginas (biografia.html, agenda,html, inicial.html, etc...), quando você clica em um link que está dentro dessas páginas, ele não pega a função

:S

William Bruno · Junho 1, 2011

faça oque eu disse, e na index, troque:

$("#abrirpag a").click(function( e ){

por:

$("#abrirpag a").live('click',function( e ){

Buthy · Junho 1, 2011

opa! parece que agora funcionou, sem nenhum bug!

finalmeeeente!

obrigado pela paciência cara! ehehe

uhuuuuuuuul!

só mais uma coisa...

Ali no index.html dentro da div page, eu coloco o código igual o da inicial.html

Então dai fica "duplicado"... E quando altero um, tenho que alterar o outro

Tem algum jeito de eu fazer com que a inicial.html seja carregada ali dentro??

Só sei de frames...

Muito obrigado mesmo cara!

William Bruno · Junho 1, 2011

Tem algum jeito de eu fazer com que a inicial.html seja carregada ali dentro??

sim ue..

$('#page').load('inicial.html');

Buthy · Junho 1, 2011

aham, eu tinha tentado essa..

mas daí o slider não carrega :S

Arquivado

[Resolvido] Problema com função para carregar página

Recommended Posts

Buthy 0

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

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

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

Buthy 0

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

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

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

Buthy 0

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

Buthy 0

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

Buthy 0

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

Buthy 0

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

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura