Jump to content
Fórum Script Brasil
  • 0

Requisições Javascript


Edmilson Cruz
 Share

Question

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.

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

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!

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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:

Link to comment
Share on other sites

  • 0

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+

Link to comment
Share on other sites

  • 0

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+

Link to comment
Share on other sites

  • 0

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?

Link to comment
Share on other sites

  • 0

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+

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...