[Resolvido] atualizar página, mudando somente o conteúdo

Annyh · Maio 21, 2010

fala pessoal, tenho um script em ajax para quando o usuário clicar em um link só mudar o conteúdo, sendo assim, só carrega o que realmente precisa...

o problema que não funcionou no meu site...

ajax.js

$(function(){
      $("#carregando").hide();
      
         $("ul#menu a").click(function(){
            pagina = $(this).attr('href')
            
            $("#carregando").ajaxStart(function(){
               $(this).show()
               })
            $("#carregando").ajaxStop(function(){
               $(this).hide();
               
            })
            
            $("#conteudo").load(pagina);
            return false;
         })
})

a jquery peguei pela url...

e o meu index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
	<head>
		<meta http-equiv="Content-Type" content="application/xml+xhtml; charset=utf-8" />
		<meta name="author" content="JR.A design - soluções web" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="robots" content="" />
		<title>Alvaro e Magrão</title>
		
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/shadowbox.js"></script>
	<script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript" src="js/func.js"></script>
        <link href="css/shadowbox.css" rel="stylesheet" type="text/css" />
		<link href="css/css.css" rel="stylesheet" type="text/css" />
        
        <!--[if IE 7]>       	
        <link href="css/ie7.css" rel="stylesheet" type="text/css" />
		<![endif]-->  
        
        <!--[if IE 8]>       	
        <link href="css/ie8.css" rel="stylesheet" type="text/css" />
		<![endif]-->
        
        <script type="text/javascript">
			Shadowbox.init ({
				language:	'pt',
				player:		['img', 'html', 'php', 'swf'],
						   });
				
		</script>        
		
	</head>
	
	<body>
		
		<div id="global"><!-- Envolve todo o conteúdo do site -->
			<div id="topo"></div>
			
			<div id="nav">
			
				<ul id="menu">
					<li><a href="inicio.php">início</a></li>
					<li><a href="#">a dupla</a></li>
					<li><a href="#">shows</a></li>
					<li><a href="#">músicas</a></li>
					<li><a href="#">contratantes</a></li>
					<li><a href="#">recados</a></li>
					<li><a href="#">vídeos</a></li>
					<li><a href="http://www.google.com" rel="shadowbox" title="Fale conosco">contato</a></li>
				</ul>
				
			</div><!-- fim menu -->
       <div id="conteudo></div>
			<div id="agenda">
				
				<h2>Agenda</h2>
				<ul>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
				</ul>
				<a href="#" class="vermais" title="veja mais fotos">Ver mais</a>

			</div><!-- fim da agenda -->

			<div id="videos">
			
				<h2>Vídeos</h2>
				<ul class="videos">
					<object width="260" height="209"><param name="movie" value="http://www.youtube-nocookie.com/v/GNCqt1wPzC0&hl=pt_BR&fs=1&color1=0xe1600f&color2=0xfebd01&border=1"></param><param'>http://www.youtube-nocookie.com/v/GNCqt1wPzC0&hl=pt_BR&fs=1&color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/GNCqt1wPzC0&hl=pt_BR&fs=1&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="209"></embed></object>
				</ul>
				<a href="#" class="vermais" title="veja mais videos">Ver mais</a>
			
			</div><!-- fim dos vídeos -->

			<div id="apoio">
				
				<h2>Apoio</h2>

				<span class="imgapoio">
					<?php
					
						include 'includes/func.inc.php';
						mostraImgPatrocinadores();
						
					?>
				</span>
			
			</div><!-- fim apoio -->

			<div id="fotos">
				
				<h2>Fotos</h2>				
                
					<?php
						require_once 'includes/exibe.php';
                        echo '<ul class="fotos">';
                        echo exibe_img();
						echo '</ul>';
						
                    
                    ?>
                
				<a href="#" class="vermais" title="veja mais fotos">Ver mais</a>
				
			</div><!-- fim das fotos -->

			<div id="wallpapers">
				
				<h2>Wallpapers</h2>
					<ul class="wallpapers">
						<li><img src="imgs/i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="imgs/i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="imgs/i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
							
						<li><img src="imgs/i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="imgs/i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="imgs/i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
												
					</ul>
					<a href="#" class="vermais">Ver mais</a>
					
			</div><!-- fim dos wallpapers -->

			<div id="muralrecados">
				<h2>Mural de recados</h2>
				<div id="mensagem">
					<ul>
						<li>
							<h3>Annyh</h3>
							<address>Curitiba - PR</address>
							<p class="mensagem">Fui no show de vocês, foi demais, gostei de todas as músicas, adoro vocês...</p>
						</li>
						
						<li>
							<h3>Junior Eberhardt</h3>
							<address>Joinville - SC</address>
							<p class="mensagem">Gosto das músicas de vocês, sempre ensaio para canta-las na noite, eu também sou cantor !!!</p>
						</li>
						
						<li>
							<h3>Annyh</h3>
							<address>Curitiba - PR</address>
							<p class="mensagem">Fui no show de vocês, foi demais, gostei de todas as músicas, adoro vocês...</p>
						</li>
						
					</ul>
				<a href="#" class="vermais">Ver mais</a>
				</div>
				
			</div><!-- fim do mural -->

			<div id="faclube">
			
				<h2>Fã clube</h2>			
				<form method="post" action="#">
					<fieldset>
						<p>Faça seu login para ter acesso a área exclusiva do site.</p>
						<label for="faclube_mail">Email:</label><input type="text" id="faclube_mail" /><br />
						<label for="faclube_senha">Senha:</label><input type="password" id="faclube_senha" /><br />                                                       
						<a href="#">Esqueceu sua senha?</a><br />
						<a href="#">Quero me cadastrar</a><br />
						<button type="submit">Entrar</button><br /><br />						
						
					</fieldset>
				</form>
				
			</div><!-- fim do fã clube -->				

			<div id="novidades">
			
				<h2>Novidades</h2>
                                        
					<form method="post" action="">
						<fieldset>
							<p>Receba nossas novidades!</p>
							<label for="novidades_nome">Nome:</label><input type="text" id="nome" /><br />
							<label for="novidades_mail">Email:</label><input type="text" id="email" /><br />
							<button type="submit" value="enviar">Inscrever</button>
						</fieldset>
					</form>
					
			</div><!-- fim novidades -->				

			<div id="enquete">
				<h2>enquete</h2>
					<form method="post" action="#">
						<fieldset>
							<p>Qual a música da dupla que você mais gosta?</p>
								<ul>
									<li><input type="radio" name="radio" value="opc1" id="opc1" checked="checked" /><label for="opc1">Sei lá</label></li>
									<li><input type="radio" name="radio" value="opc2" id="opc2" /><label for="opc2">Sei cá</label></li>
									<li><input type="radio" name="radio" value="opc3" id="opc3" /><label for="opc3">Sei sim</label></li>
									<li><input type="radio" name="radio" value="opc4" id="opc4" /><label for="opc4">Sei não</label></li>
								</ul>
							<button type="submit">Votar</button>
							<a href="http://www.google.com" class="vermais" title="Resultado da Enquete" rel="shadowbox; width=400;height=300;">Ver parcial</a>
						</fieldset>                             
					</form>
					
			</div><!-- fim enquete -->
			
				<ul id="social">
					<li><a href="

src="imgs/youtube.png" alt="You Tube" title="Nossos vídeos" /></a></li> <li><a href="http://twitter.com/alvaroemagrao"><img src="imgs/twitter.png" alt="Twitter" title="Siga-nos" /></a></li> <li><a href="http://palcomp3.com/alvaroemagrao/"><img src="imgs/palcomp3.png" alt="PalcoMP3" title="Ouça-nos" /></a></li> <li><a href="http://www.orkut.com.br/Main#Profile?uid=11808195783791001973"><img src="imgs/orkut.png" alt="Orkut" title="Nossa comunidade" /></a></li> </ul> <p id="copyright">Copyright © 2010 | Todos os direitos reservados <a href="jradesign.com">JR.A design - soluções web</a></p> </div> </body> </html>

testei em uma página separada e funcionou... mas no meu site não...

William Bruno · Maio 21, 2010

Seguinte, o <a> não deixou der ser um link.

Então, pelo teu código, a requisição pode estar sendo feita, porém como o 'html' dele, ainda está funcionando, esta é interrompida, e ai chega a requisição pro navegador, e ele te mostra, com refresh.

você precisa desativar a função do link:

$("ul#menu a").click(function( e ){
            e.preventDefault();
            pagina = $(this).attr('href')

Annyh · Maio 21, 2010

com todo respeito, você escreveu, escreveu e eu não entendi nada...

visitante_xp · Maio 21, 2010

@Annyh o que o @William quer dizer é que os link vão sempre dar refresh na pagina a não ser que você tire a propriedade de link dele.

O código que ele passou faz isso.

<ul id="menu">
                                        <li><a href="inicio.php">início</a></li>
                                        <li><a href="#">a dupla</a></li>
                                        <li><a href="#">shows</a></li>
                                        <li><a href="#">músicas</a></li>
                                        <li><a href="#">contratantes</a></li>
                                        <li><a href="#">recados</a></li>
                                        <li><a href="#">vídeos</a></li>
                                        <li><a href="http://www.google.com" rel="shadowbox" title="Fale conosco">contato</a></li>
                                </ul>

O código vai agir nessa parte do seu código. Aqui os link perdem a propriedade de link e só fazer as requisições.

Encaixa ai e ve no q dá... Imagem Postada

Annyh · Maio 21, 2010

testei, mas infelizmente não funcionou... ah o que eu faço? http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

William Bruno · Maio 21, 2010

Um erro que vi agora, tá faltando fechar as aspas:

<div id="conteudo></div>

Annyh · Maio 21, 2010

ja tinha visto isto tambem, mas mesmo assim continua não funcionando.. ja testei este script milhares de vezes, mas no meu site não quer funcionar...

William Bruno · Maio 21, 2010

Então tem outra coisa interferindo... pois eu arrumei as aspas e funcionou.

apenas para teste, retire:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/shadowbox.js"></script>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript" src="js/func.js"></script>

e deixe apenas:

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

sim, baixe o jQuery para a tua pasta /js, e remova o shadowbox, e o 'func'.

Annyh · Maio 21, 2010

fiz como você falou, mas deve ser coisa do inimigo...

não funcionou, incrivel, não é?

o que pode ser?

estou testando no meu servidor local "localhost", a minha index é PHP...

tem alguma coisa haver?

Annyh · Maio 21, 2010

aehhhhhhhhhhhhhhhhhhhhhhhh...

consegui, descobri o erro... é tão patético que nem sei como escrever...

o problema era na chamada do arquivos...

tem que respeitar a ordem, jquery primeiro depois o ajax...

só isso, e deu certinho, mas valeu o aprendizado... obrigado amigos pelo empenho, bjs.

Annyh · Maio 21, 2010

aehhhhhhhhhhhhhhhhhhhhhhhh...

consegui, descobri o erro... é tão patético que nem sei como escrever...

o problema era na chamada do arquivos...

tem que respeitar a ordem, jquery primeiro depois o ajax...

só isso, e deu certinho, mas valeu o aprendizado... obrigado amigos pelo empenho, bjs.

cancela...

deu certo mas não ta funcionando...

quando eu clico em outro link ele não abre a pagina...

o que esta acontecendo agora?

William Bruno · Maio 21, 2010

depende... colocou o valor dos href ??

<li><a href="#">a dupla</a></li>
                                        <li><a href="#">shows</a></li>
                                        <li><a href="#">músicas</a></li>
                                        <li><a href="#">contratantes</a></li>
                                        <li><a href="#">recados</a></li>
                                        <li><a href="#">vídeos</a></li>

Annyh · Maio 21, 2010

sim, coloquei o href...

<ul id="menu">
					<li><a href="home.html">início</a></li>
					<li><a href="dupla.html">a dupla</a></li>

William Bruno · Maio 21, 2010

Para debug, execute assim:

$("ul#menu a").click(function( e ){
            e.preventDefault();
            pagina = $(this).attr('href');
            alert( pagina );

e então, navegue pelo sistema.. e veja qndo para de funcionar, e se o alert continua aparecendo.

Na dúvida, de não ter outro erro de aspas, valide o teu documento:

http://validator.w3.org/

Annyh · Maio 21, 2010

este script funfo, qualquer link que eu cliquei funcionou, apareceu uma caixa de dialogo... e agora...

William Bruno · Maio 22, 2010

carregou os conteudos ?

então agora, remova o alert, ne?! ;)

//alert( pagina );

qual a dúvida? :lol:

Annyh · Maio 22, 2010

beleza, agora esta funcionando direitinho... o problema é que eu coloco no servidor online, e quando clico em um dos links aparece bem rápido o texto que deveria aparecer, e vai para uma página em branco...

William Bruno · Maio 22, 2010

hum... então parece que o preventDefault(); não funcionou...

coloca um link aqui do teu site publicado, ou atualiza mostrando como ficou o teu código.

Em que navegador testou ?

Ctrl+Shift+J (no firefox), mostra algum erro ? qual ?

Annyh · Maio 22, 2010

http://jradesign.orgfree.com/siteAM/

William Bruno · Maio 22, 2010

Comece validando o teu documento:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fjradesign.orgfree.com%2FsiteAM%2F

Veja o script que o teu host está adicionando:

<!-- Free Web Hosting Area Start -->
<br><center><a target="_blank" href="http://www.freewebhostingarea.com"><img src="http://users.freewebhostingarea.com/i/freehosting.png" border="0" width="88" height="15" alt="Free Web Hosting"></a></center>
<script type="text/javascript" src="http://users.freewebhostingarea.com/a/l2.js"></script>

<noscript><br><center><font color='#000000' face='Verdana' style='font-size: 11px; background-color:#FFFFFF'><a target='_blank' href='http://www.freewebhostingarea.com'><font color='#000000'>Free Web Hosting</font></a></font></center></noscript>
<!-- Free Web Hosting Area End -->

no arquivo:

http://jradesign.orgfree.com/siteAM/arquivos/teste.html

provavel que seja esse o causador do problema ^_^

Arquivado

[Resolvido] atualizar página, mudando somente o conteúdo

Recommended Posts

Annyh 4

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

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

visitante_xp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

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

Annyh 4

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

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

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

Annyh 4

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

Annyh 4

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

Annyh 4

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

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501