Discussoes de Programacao e Tecnologia

2 Dúvidas: Reload AJAX e Múlt. DIVs

5 respostas
G
GangPJ

Olá!

Sou iniciante em AJAX e estou fascinado com seus poderes. Agora sem enxecao de saco, estao as seguintes duvidas:

1° -
Quando clicamos em um link por uso do AJAX, claro, ele não recarrega a página toda, fazendo reload apenas no div correspondido. Mas por exemplo, no tutorial do tableless por exemplo, quando clicamos em seus links, a página volta para o topo (role a pagina introducao pra baixo, mas ainda que dê para clicar em “Conselhos finais” e clique neste link. A pagina ira voltar para o topo certo?)
Entao, como faço para que de forma simples, a página não volte para o topo, como no BACKBASE? Iframe?

2° -
Agora outra, tenho 2 divs no meu site. principal e principal2. Uma esta em local diferente da outra, por isso a necessidade de se ter duas. Agora, se eu quiser que com um link atualizace os dois divs? (exemplo: clico em portfolio… ai no principal1 abre a portifolio.html e na principal2 quero que abra a portfolio2.html, pois nessa portifolio.html vai ter links pra atualizar o principal2)

Espero que alguem intenda e consiga explicar. ^^

Tentei ser o mais claro possivel. mas se nao adiantar, eu mando screens-

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

5 Respostas

J
jaireltonPJ

1º
A pagina volta ao topo porque o link está apontando para #, então aponte o link para a função javascript ou use um botao ou algo assim:

ex.:

<a href="javascript:minhaFuncao()">Clique</a>

<a href="javascript:void(0)" onClick="javascript:minhaFuncao()">Clique</a>

<input type="button" onClick="javascript:minhaFuncao()" value="Clique" />

2º

Você atribui o que você quiser, onde você quiser dentro de uma função, então pegue o conteudo da pagina1 e coloque no div1 e o da pagina2 no div2!

function carregar(){
   var req = new XmlHttpRequest();

   req.open("GET", "portifolio.html", true);

   req.onreadystatechange = function(){
       if(req.readyState==4){
           var div1 = document.getElementById("principal");
           div1.innerHTML = req.responseText;
       }
   }
   req.send(null);

   var req2 = new XmlHttpRequest();

   req2.open("GET", "portifolio2.html", true);

   req2.onreadystatechange = function(){
       if(req2.readyState==4){
           var div2 = document.getElementById("principal2");
           div2.innerHTML = req2.responseText;
       }
   }
   req.send(null);
}

Veja um video em http://jairelton.com.

G
GangPJ

Sim… entendi…

o problema eh que nao estou usando o link em javascrip… e sim em PHP como no tableless…

ai o link fika assim:

<a href="?i=2"<?classi(2)?> title="Portfólio">Link texto</a>

“i” eh a variavel, que quando clica o DIV “pega” com:

<div id="conteudo"><?=leconteudo($i)?></div>

Entao axo que devo linkar nao com php (?i=2) e sim com JS… tem como?
(dê uma olhada no TABLELESS, minha pagina tah bem parecida com sua estrutura)
Desculpe… mas sou novato msm e nao tenho medo de falar…

o msm com o 2… eu xamo pelo i… auhsuahsuas… poits… sei que nao deve ser o lugar exato pra perguntar, porque leva php, mas sei lah, se tiver como neh…

G
GangPJ

tah… tudo bem. .to fazendo soh com JS e menos php… ai msm botando o link do jeito que vc falow… ele vai pro topo… arggg…

olha meu codigo fonte (exemplo…):

index.php

<?php
session_start();
?>

<head>
<meta http-equiv="Content-Language" content="fr-ch">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script src="js.js" language="javascript" type="text/javascript">
<!-- Pq aki no forum nao posso postar <script> final com a barrinha? num vai.. ^^ mas botem o ele... /-->




<title>Index</title>
</head>

<body>

<div style="position: absolute; width: 164px; height: 262px; z-index: 1; left: 4px; top: 25px" id="menu">
<a href="javascript:link('link1');">Link1</a><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
<a href="javascript:void(0)" onClick="javascript:link('link2');">Link2</a><br />
<a href="javascript:link('link3');">Link3</a><br />
<a href="javascript:link('link4');">Link4</a><br />
<a href="javascript:link('link5');">Link5</a><br /></div>
	<div style="position: absolute; width: 334px; height: 264px; z-index: 1; left: 296px; top: 20px" id="conteudo">
	<?php
                    if (session_is_registered('link')) {
                        
                        include($_SESSION['link']);
                    } else {
                        print 'Página inicial';
                    }
                ?>
                </div>
		<div style="position: absolute; width: 978px; height: 182px; z-index: 1; left: -90px; top: 310px" id="conteudo2"></div>
</body>

js.js

function ajaxInit() {

   var xmlhttp;

   try {
      xmlhttp = new XMLHttpRequest();
   } catch(ee) {
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch(E) {
            xmlhttp = false;
         }
      }
   }

   return xmlhttp;

}

function link(pagina) {

    ajax = ajaxInit();

    if (ajax) {

        ajax.open("GET", "registrar.php?pagina=" + pagina, true);
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    window.location.reload();
                }
            }
      }

      ajax.send(null);

   }
}

registrar.php

<?php

session_start();

    $gmtDate = gmdate("D, d M Y H:i:s");
    header("Expires: {$gmtDate} GMT");
    header("Last-Modified: {$gmtDate} GMT");
    header("Cache-Control: no-cache, must-revalidate");
    header("Pragma: no-cache");

    $_SESSION['link']   = $_GET['pagina'] . '.php';
    $_SESSION['GET']  = $_GET;

?>

link1.php

teste.php
<p><font color="#008000">ESSE FOI PRO LINK 1
</font></p>
<p> </p>

link2.php

teste.php
<p><font color="#008000">ESSE FOI PRO LINK 2
</font></p>
<p> </p>

^^

to doido atras disso…

J
jaireltonPJ

Qual link vai pro topo?

Esse que tem void(0)? pois não deveria!

G
GangPJ

todos os links tao indo pro topo… jah botei void pra todos… tirei… fiz de tudo que tinha em java… mas nada adianta…

estranho neh???

afff…

tah sinistro de resolver isso…

Criado 29 de julho de 2006
Ultima resposta 30 de jul. de 2006
Respostas 5
Participantes 2

Topicos relacionados

Compilar e executar uma classe java pelo prompt do windows 13 respostas [RESOLVIDO] Como executar função JavaScript após página carregada 13 respostas Java.lang.OutOfMemoryError: Java heap space - Como resolver? 11 respostas Como consultar CPF na Receita Federal usando Web Service? 22 respostas Como acessar localhost de forma externa? [RESOLVIDO] 13 respostas
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Casa do Codigo Guia pratico de TypeScript: Melhore suas aplicacoes... Por Thiago da Silva Adriano — Casa do Codigo