Conteudo em DIV

[Alchemist 0]

Fala ai pessoal tudo bem ?

 

Estou fazendo o meu primeiro site em php usando Jquery e estou com uma duvida simples.

 

O Layout do meu site é dividido em cabeçalho, menu, conteudo e rodapé, a minha duvida é:

 

Como eu mudo o conteudo da minha div CONTEUDO sem precisar carregar toda a pagina de volta

 

 

Se possivel alguem poderia postar algum exemplo ?

[Lucas Guima 164]

Pode usar um meio de a div se transformar num iFrame...

 

ESSTA TAG VAI DENTRO DO HEAD

<script>
function ajax(div,url){
var o=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP.3.0");
o.onreadystatechange=function(){ 
if(o.readyState==4 && o.status==200) document.getElementById(div).innerHTML=o.responseText;
}
o.open('GET',url,true);
o.send(null);
}
</script>


SEU LINK, QUE DEVE DIRECIONAR PARA A PAGINA QUE IRÁ SUBSTITUIR O CONTEUDO DA DIV
<a href="javascript:void(0)" onclick="javascript:ajax('divabrir','contato.php')">Abrir em outra div</a>

<div id="divabrir">TODO CONTEUDO NESSA DIV SERÁ SUBSTITUIDO PELO CONTEUDO DO SEU LINK</div>

Ou com divs escondidas também... mas tudo vai usar JS e não PHP.

[Matias Rezende 50]

Tópico Movido

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Ajax

[Alchemist 0]

beleza valeu a ajuda, vou fazer uns testes aqui na minha pagina, será que alguem teria mais exemplos e tal ?

[Matheus Tavares 167]

Amigo, veja o meu post lá em baixo neste link:

http://forum.imasters.com.br/index.php?/topic/357736-atacando-e-mostrando-ataques-anteriores/

 

É exatamente o que você precisa.

 

Abraços.

[shis 0]

Esquece o iframe, como você está usando jQuery, use as funções do framework

 

$(document).ready(function(){
   $('#sua_div').load('pagina.php');
   
   // VOCÊ PODE PASSAR VARIAVEIS E CHAMAR FUNÇÃO CALLBACK
   $('.outra_div').load('pagina.php', {'variavel':valor}, funcaoCallback);
});

function funcaoCallback(data){
   alert('faz aqui o retorno');
}

[marfig74 0]

Quer outra solução?

Siga os passos do TED K, um programador que posta seus artigos em vários foruns e blogs, mas como todo artigo ele vai se atualizando dentro do post, corrigindo erros e bugs que vão aparecendo vou postar aqui uma solução do TED K já atualizada que funciona no Internet Explorer 8, Firefox 3.5.2, Chrome 2.0.172.39 e Safarai 4.0.2. São os navegadores que tenho.

 

A função do TED K já dissiminada na net é essa.

 

Crie o arquivo ajax.js

 

function GetXMLHttp() {

if(navigator.appName == "Microsoft Internet Explorer") {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }

else {

xmlHttp = new XMLHttpRequest();

}

return xmlHttp;

}

var xmlRequest = GetXMLHttp();

 

 

Depois crie o arquivo instrucao.js

 

function abrirPag(valor){

var url = valor;

xmlRequest.open("GET",url,true);

xmlRequest.onreadystatechange = mudancaEstado;

xmlRequest.send(null);

if (xmlRequest.readyState == 1) {

document.getElementById("conteudo").innerHTML = "<img src='loader.gif'>";

}

return url;

}

function mudancaEstado(){

if (xmlRequest.readyState == 4){

document.getElementById("conteudo").innerHTML = xmlRequest.responseText;

}

}

 

 

 

e no link HTML que você for chamar é só botar algo como

<div id="menu">

<ul>

<li><a href="#" onclick="abrirPag('noticias.html');">Noticias</a></li>

<li><a href="#" onclick="abrirPag('contato.html');">Contato</a></li>

</ul>

</div>

<div id="conteudo">

</div>

 

 

 

Assim você faz o menu na DIV menu, e quando o usuario clicar em 'Noticias' vai carregar o arquivo noticias.html na DIV conteudo

 

Coloca os dois arquivos js na raiz do site e chama eles pela head do html.

 

É imporante no arquivo instrucao.js deixar exatamente como está na ordem aí acima, pois isso foi um dos bugs desde a primeira versão. Dessa forma ele funciona nos navegadores que citei.

 

Boa sorte!

 

 

Quero saber se tem alguem que saiba como fazer um segundo menu (exmplo DIV id="menu2") direcionando para uma DIV id="conteudo2" por exemplo, sem que o primeiro deixe de funcionar.

 

Essa é minha grande questão!