[Resolvido] Mudar conteúdo de uma DIV

[LostSoul 0]

Gostaria de saber como posso fazer para mudar o conteúdo de uma DIV ao clicar em um LINK, sem ter que abrir uma nova página. Vi alguma coisa sobre AJAX mais não consegui! Gostaria se possível alguma solução em JAVA.

Obrigado!

[Eliseu M. 2]

Hmm, simples :]

 

Eu sou usuário da biblioteca jQuery, que facilita e muito a nossa vida. Com ela, podemos fazer isso em poucas linhas:

 

$(document).ready(function() {
	$("a#ajax").click(function() { // inclui todos os links com id="ajax"
		$("#ajaxContent").load($(this).attr("href")); // carrega o conteúdo da página em HREF dentro da DIV #ajaxContent (id="ajaxContent")
		return false; // remove a ação do link para navegar até a página do HREF, pois ela já foi carregada na DIV
	});
});

Todos os links que tiverem o ID ajax receberão a função. O script pega seu atributo HREF e faz o load da página, que é carregada na DIV #ajaxContent.

 

Lembre-se:

 

- Deves incluir a biblioteca jQuery (download em jquery.com);

- Deves criar o elemento #ajaxContent para receber o conteúdo da página e também os links devem ter id="ajax".

[LostSoul 0]

Cara valeu mesmo! Vou tentar aqui pra ver se funciona! Já estou a um bom tempo procurando isso!

 

Eliseu, o código funcionou! Só tem um problema! Não apereceu a acentuação das letras! Alguma solução para isso?

[LostSoul 0]

Se alguém puder me ajudar fico agradecido! Fiz uma galeria de imagens em CSS e preciso colocar os botões de avançar e voltar as páginas. Como posso fazer isso? Segundo o colega Eliseu, com AJAX, muito bem! O código funciona, mais como ainda sou leigo no assunto, acho que não estou sabendo impletar isso junto ao meu HTML. Abaixo seguem os códigos em CSS que uso e minha galeria no HTML.

 

Código CSS:

 

.principal { 
   margin:0 auto; 
}
.conteinerfoto { 
   float:left; 
   width:180px; 
   height:110px; 
   margin: 5px;
   margin-left: 15px;
   margin-top: 12px; 
   padding:5px; 
   background-color:#f5f7f9; 
   border-right: #a5a7aa solid 1px; 
   border-bottom: #a5a7aa solid 1px; 
   text-align:center; 
}

Código no HTML:

 

<div id="galeria">
<div class="title1">Galeria - Eventos</div>
<div class="sub-title">Confira aqui as fotos dos eventos:</div>
<br>
<div class="principal">
	<div class="conteinerfoto"><a href="#"><img src="images/gev/ods.jpg" border="0" alt=""><br /><span>Odisséia Sergipe - 2010</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
	<div class="conteinerfoto"><a href="#"><img src="images/gev/aguarde.jpg" border="0" alt=""><br /><span>Aguarde!</span></a></div>
</div>
</div>

Obrigado a todos!

[Evandro Oliveira 331]

http://www.huddletogether.com/projects/lightbox2/

[LostSoul 0]

http://www.huddletogether.com/projects/lightbox2/

 

Caro Evandro, realmente essa galeria é show de bola, mais o que preciso mesmo é só dos botões que não sei como fazer! Já tenho minha galeria feita, só falta os botões pra mudar o conteúdo da DIV. Se puder me ajudar agradeço!

 

Usei a função carrega em AJAX, mais só há um problema, a acentuação não aparece, já dei uma pesquisada aqui no fórum mais não consegui entender o que achei, e o que achei e testei não funcionou! Como posso resolver esse problema?

[Thiago de Oliveira Cruz 21]

Bom uma vez que você ta usando jQuery

 

Você sempre pode fazer assim:

$(document).ready(function() {
	$('.classe_desejada').click(function(){
 	$("#id_do_conteiner_a_ser_alterado").html("CODIGO QUE VAI SER TROCADO AQUI");
	});
}

Com isso ai você pode pegar o conteúdo HTML de algum lugar por exemplo um ELEMENTO img e colocar ali dentro.

Ai pode adicionar tags ou só pegar o valor src de alguma imagem e troca o valor da imagem que ta no container a div a ser alterada.

 

Com jQuery se pode fazer isso ai brincando e nem precisa de ajax se é só para alterar conteúdo já existente, por outro que já está carregado na página.

 

Agora se você quiser fazer uma paginação e tals você cria um arquivo separado no qual vai carregar sempre as novas informações com a passagem de um page ou algo da vida

Ai com GET nesse novo arquivo você pega esses dados e cria as informações

 

E ai com Ajax você faz a alteração do conteúdo

Exemplo:

jQuery.ajax({
 var page = $(".page").val();
 url: "search_form.php?"+page,
 cache: false,
 success: function(html){
 	jQuery("#change").html(html);
 }
 });

Abraços

[LostSoul 0]

O caso é o seguinte Berseck, eu tenho uma galeria de fotos em CSS, e uso o código em AJAX passado pelo colega Eliseu logo acima, o código funciona tranquilo, só que tipo, ao clicar em galeria abre uma página onde ficam 9 fotos (dentro de uma DIV) com os slogans dos eventos, e ao clicar no evento eu gostaria que abrisse "na mesma DIV" as fotos relacionadas aquele evento, sendo que a div ficaria só com 9 fotos e abaixo os botões de "Avançar", "Retornar", "Fim" e "Começo". Não sei se consegui explicar bem mais abaixo segue o código que estou utilizando na galeria e o AJAX que foi passado pelo colega Eliseu.

 

Código para efeito nas fotos:

Existe o arquivo JS que faz o efeito. (imageflow.js)

 

.principal {  
   margin:0 auto;  
} 
.conteinerfoto {  
   float:left;  
   width:180px;  
   height:110px;  
   margin: 5px; 
   margin-left: 15px; 
   margin-top: 12px;  
   padding:5px;  
   background-color:#f5f7f9;  
   border-right: #a5a7aa solid 1px;  
   border-bottom: #a5a7aa solid 1px;  
   text-align:center;  
}

Código no HTML:

 

<div id='conteudo'> 
<div class="title1">Galeria - Eventos</div> 
<div class="sub-title">Confira aqui as fotos dos eventos:</div> 
<br> 
<div class="principal"> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Descrição</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
        <div class="conteinerfoto"><a href="#"><img src="#" border="0" alt=""><br /><span>Aguarde!</span></a></div> 
</div> 
</div>

Código AJAX para carregar na determinada DIV:

O link do primeiro evento fica assim: <a href="//página onde estão as fotos do evento//" onClick="javascript:carrega('conteudo', 'cont.html')">

 

<script>
try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try{
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch(E) {
xmlhttp = false;
}
}
}
function carrega(_idContainer, _endereco){
xmlhttp.open('GET',_endereco,true);
xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){
retorno=xmlhttp.responseText;
var tag_container = document.getElementById(_idContainer);
tag_container.innerHTML=retorno;

}
}
xmlhttp.send(null)
}
</script>

[Thiago de Oliveira Cruz 21]

Não use Ajax assim use Ajax com jQuery... menos chance de dar erro

 

Baixa lá:

http://api.jquery.com

 

E veja como fazer Ajax

 

Eu já dei uma explicada por cima...

 

O que você quer é exatamente o que faz esse site aqui: http://www.apartment4students.com/search.php

O código mostrado quando você clica para procurar um apartamento

 

Ele recarrega a div lateral com o novo conteúdo.

E é fazendo exatamente com o código que eu passei acima.

 

Abraços

[LostSoul 0]

Não use Ajax assim use Ajax com jQuery... menos chance de dar erro

 

Baixa lá:

http://api.jquery.com

 

E veja como fazer Ajax

 

Eu já dei uma explicada por cima...

 

O que você quer é exatamente o que faz esse site aqui: http://www.apartment4students.com/search.php

O código mostrado quando você clica para procurar um apartamento

 

Ele recarrega a div lateral com o novo conteúdo.

E é fazendo exatamente com o código que eu passei acima.

 

Abraços

 

Caro Berseck, você poderia me dizer o que há de errado com essa função que estou usando. Segue abaixo:

 

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

Essa função não está funcionando! Acho que não estou fazendo o link direito.

[LostSoul 0]

Caro Berseck, resolvi meu problema em relação ao carregamento. Só que agora surgiu outro, o efeito "onClick" não está funcionando no IE8. Como posso resolver isso?

[LostSoul 0]

[Resolvido]