Requisições Javascript

[Edmilson Cruz]

Olá pessoal,

A partir de um link faço uma requisição ao servidor para carregar um conteúdo em uma DIV específica no meu website. Até aí sem problema. Porém, gostaria de atualizar também o conteúdo de outra DIV simultâneamente ao clicar no mesmo link. Tem como fazer isso? Como agregar essas novas informações ao link que já contém a primeira função?

Obrigado pela atenção de todos que puderem ajudar.

[Mestre SAM]

mostre como você esta fazendo isso!!!

[Edmilson Cruz]

Estou usando os seguintes Scripts para o IE e Firefox/Opera:

<script type="text/javascript">
function retObjReq() 
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
</script>[/color]

[color=#8B0000]&lt;script type="text/javascript">
function retObjReq() 
{
return new XMLHttpRequest();
}
</script>

A função que executa a requisição é essa:

<script type="text/javascript">
function loadCont( pag, id)
{
var objReq = retObjReq();
if (objReq)
{
objReq.onreadystatechange = function()
{
if (objReq.readyState == 4 && objReq.status == 200)
{	
showCont(objReq.responseText, id);
}
else if(objReq.readyState == 4 )
{
}
}
objReq.open("GET", pag, true);
objReq.send(null);
}
} 
function showCont(txt, id)
{
oDiv = document.getElementById(id);
oDiv.innerHTML = txt;
}
</script>

No link foi adicionado:

<a href="java script:;" onclick="loadCont();">Produtos</a>

Entre os parênteses foi colocado o arquivo HTML a ser inserido e a DIV de destino.

Agora gostaria que ao clicar nesse mesmo link fosse atualizada não somente essa, mas também uma outra DIV ao mesmo tempo. Aí está o ponto.

Valeu!

[Mestre SAM]

opa, não tem misterio.

se você quizer manter o codigo dinamico, é só passar o nome da outra div como referencia.

assim como já faz com a primeira div.

ou se quizer facilitar ao maximo, porem amarrar o codigo, é só colocar uma linha a mais no codigo.

primeira opcao ficaria assim:

<a href="java script:;" onclick="loadCont();">Produtos</a>

ficaria:

<a href="java script:;" onclick="loadCont('pagina','div1','div2');">Produtos</a>

e...

<script type="text/javascript"> function loadCont( pag, id) {

<script type="text/javascript">
function loadCont( pag, id, id2)
{

showCont(objReq.responseText, id);

showCont(objReq.responseText, id, id2);

por ultimo:

function showCont(txt, id) { oDiv = document.getElementById(id); oDiv.innerHTML = txt; }

function showCont(txt, id, id2)
{
oDiv = document.getElementById(id);
oDiv.innerHTML = txt;
nDiv = document.getElementById(id2);
nDiv.innerHTML = txt;
}

isso se você quizer seguir o padrão do codigo, manter ele dinamico e tals. mas você pode esquecer isso tudo ai em cima e colocar só uma linha. aqui:

function showCont(txt, id) { oDiv = document.getElementById(id); oDiv.innerHTML = txt; }

você incluiria a linha:

function showCont(txt, id)
{
oDiv = document.getElementById(id);
oDiv.innerHTML = txt;
document.getElementById("nome_da_sua_div").innerHTML = txt;
}

e era isso,

sucesso ai.

[Edmilson Cruz]

Muito obrigado! Muito obrigado mesmo! :D

Sucesso para você também!

Ah, sim, mas isso funciona se, por exemplo, quando clicar no link, a Página1.html é carregada na Div1 e a Página2.html na Div2? Ou somente a mesma página é carregada em ambas as Div"s?

:huh:

É meu amigo, não deu certo. Ao clicar no link tanto a div1 quanto a div2 recebem a mesma página, com o mesmo conteúdo. Na verdade gostaria que ocorresse da seguinte maneira:

- Clique no "Link" e...

1. A DIV1 recebe o conteúdo da PÁGINA1;

2. A DIV2 recebe o conteúdo da PÁGINA2.

Exemplificando:

- A DIV1 já está recebendo um conteúdo com textos explicativos, que é a PÁGINA1.

- A DIV2 receberia a PÁGINA2 com um filme SWF ilustrando o texto da DIV1.

Essa é a questão. :blink:

[Mestre SAM]

ah certo,

eu não tinha entendido que era dessa maneira.

mas é praticamente a mesma coisa.

me diz qual solucao você usou, a mais facil ou a mais completa?

ai eu te mostro o que alterar.

t+

[Edmilson Cruz]

Usei a mais completa, pela transparência do código final.

No aguardo...

[Mestre SAM]

certo,

é só fazer o mesmo esquema que foi feito pra adicionar a div.

foi passado o nome da div por parametro, então adicionamos a nova pagina por parametro também.

<a href="java script:;" onclick="loadCont('pagina1', 'pagina2','div1','div2');">Produtos</a>

<script type="text/javascript">
function loadCont( pag, pag2, id, id2)
{

showCont(objReq.responseText, pag2, id, id2);

function showCont(txt, txt2, id, id2)
{
oDiv = document.getElementById(id);
oDiv.innerHTML = txt;
nDiv = document.getElementById(id2);
nDiv.innerHTML = txt2;
}

tranquilo, era isso!?

t+

[Edmilson Cruz]

Quase funcionou. Apliquei as alterçãoes no script, porém na DIV2 o conteúdo não aparece, somente uma linha de texto simples na parte de cima, contendo o endereço da página que deveria se apresentar.

O que aconteceu?

:huh:

[Mestre SAM]

ahhhh

tu ta passando só o endereco da pagina???

eu axei que tu tava passando a pagina pronta já.

então tem que pegar o conteudo da url antes pelo ajax antes de chamar a funcao.

nessa funcao aqui, você precisa chamar a pagina passando a url:

function loadCont( pag, pag2, id, id2 )
{
var objReq = retObjReq();
var objReq2 = retObjReq();
if (objReq)
{
objReq.onreadystatechange = function()
{
if (objReq.readyState == 4 && objReq.status == 200)
{
showCont(objReq.responseText, objReq2.responseText, id, id2);
}
else if(objReq.readyState == 4 )
{
}
}
objReq.open("GET", pag, true);
objReq2.open("GET", pag2, true);
objReq.send(null);
objReq2.send(null);
}
}

eu não testei... se não funcionar, vai ter que deixar a funcao como estava antes e chamar ela por duas vezes.. só que ai vai ter um intervalo de atualizacao entre as duas divs.

t+

[Edmilson Cruz]

Testei dessa última maneira, porém agora não carregou nada, acusando erro de página. Retornei com o script inicial e funcionou como antes o carregamento da primeira página. Numa tentativa sem expectativa de sucesso modifiquei o link como o seguinte:

<a href="java script:;" onclick="loadCont('http://localhost/site/pagina1.html', 'div1'); loadCont('http://localhost/site/pagina2.html', 'div2');">Link</a>

Atualizei a página, cliquei e funcionou perfeitamente, sem erro nenhum! As duas div's foram atualizadas com os novos conteúdos.

Acho que essa é a solução... :lol:

O que acha?

[Mestre SAM]

dae Edmilson,

se funcionou deste jeito esta otimo! :)

foi justamente o que sugeri caso não funcionasse.

eu não testei... se não funcionar, vai ter que deixar a funcao como estava antes e chamar ela por duas vezes.. só que ai vai ter um intervalo de atualizacao entre as duas divs.

é isso ai, sucesso sempre!

t+

[Edmilson Cruz]

É isso aí! Os conteúdos são de uma tamanho tão pequeno que nem se nota um atraso nos tempos de atualização das div's.

Obrigado pela atenção e pela ajuda!

Muito sucesso!