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

GangPJ · Julho 29, 2006, 5:46pm

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-

jaireltonPJ · Julho 29, 2006, 6:36pm

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.:

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

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

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

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!

[code]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);
}[/code]

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

GangPJ · Julho 29, 2006, 7:26pm

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:

&lt;a href=&quot;?i=2&quot;&lt;?classi&#40;2&#41;?&gt; title=&quot;Portfólio&quot;&gt;Link texto&lt;/a&gt;

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

&lt;div id=&quot;conteudo&quot;&gt;&lt;?=leconteudo&#40;$i&#41;?&gt;&lt;/div&gt;

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…

GangPJ · Julho 29, 2006, 8:48pm

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

&lt;?php
session_start&#40;&#41;;
?&gt;

&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Language&quot; content=&quot;fr-ch&quot;&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot;&gt;

&lt;script src=&quot;js.js&quot; language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
&lt;!-- Pq aki no forum nao posso postar &lt;script&gt; final com a barrinha? num vai.. ^^ mas botem o ele... /--&gt;




&lt;title&gt;Index&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div style=&quot;position&#58; absolute; width&#58; 164px; height&#58; 262px; z-index&#58; 1; left&#58; 4px; top&#58; 25px&quot; id=&quot;menu&quot;&gt;
&lt;a href=&quot;javascript&#58;link&#40;'link1'&#41;;&quot;&gt;Link1&lt;/a&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;
&lt;a href=&quot;javascript&#58;void&#40;0&#41;&quot; onClick=&quot;javascript&#58;link&#40;'link2'&#41;;&quot;&gt;Link2&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;javascript&#58;link&#40;'link3'&#41;;&quot;&gt;Link3&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;javascript&#58;link&#40;'link4'&#41;;&quot;&gt;Link4&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;javascript&#58;link&#40;'link5'&#41;;&quot;&gt;Link5&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;
	&lt;div style=&quot;position&#58; absolute; width&#58; 334px; height&#58; 264px; z-index&#58; 1; left&#58; 296px; top&#58; 20px&quot; id=&quot;conteudo&quot;&gt;
	&lt;?php
                    if &#40;session_is_registered&#40;'link'&#41;&#41; &#123;
                        
                        include&#40;$_SESSION&#91;'link'&#93;&#41;;
                    &#125; else &#123;
                        print 'Página inicial';
                    &#125;
                ?&gt;
                &lt;/div&gt;
		&lt;div style=&quot;position&#58; absolute; width&#58; 978px; height&#58; 182px; z-index&#58; 1; left&#58; -90px; top&#58; 310px&quot; id=&quot;conteudo2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

js.js

function ajaxInit&#40;&#41; &#123;

   var xmlhttp;

   try &#123;
      xmlhttp = new XMLHttpRequest&#40;&#41;;
   &#125; catch&#40;ee&#41; &#123;
      try &#123;
         xmlhttp = new ActiveXObject&#40;&quot;Msxml2.XMLHTTP&quot;&#41;;
      &#125; catch&#40;e&#41; &#123;
         try &#123;
            xmlhttp = new ActiveXObject&#40;&quot;Microsoft.XMLHTTP&quot;&#41;;
         &#125; catch&#40;E&#41; &#123;
            xmlhttp = false;
         &#125;
      &#125;
   &#125;

   return xmlhttp;

&#125;

function link&#40;pagina&#41; &#123;

    ajax = ajaxInit&#40;&#41;;

    if &#40;ajax&#41; &#123;

        ajax.open&#40;&quot;GET&quot;, &quot;registrar.php?pagina=&quot; + pagina, true&#41;;
        ajax.onreadystatechange = function &#40;&#41; &#123;
            if &#40;ajax.readyState == 4&#41; &#123;
                if &#40;ajax.status == 200&#41; &#123;
                    window.location.reload&#40;&#41;;
                &#125;
            &#125;
      &#125;

      ajax.send&#40;null&#41;;

   &#125;
&#125;

registrar.php

&lt;?php

session_start&#40;&#41;;

    $gmtDate = gmdate&#40;&quot;D, d M Y H&#58;i&#58;s&quot;&#41;;
    header&#40;&quot;Expires&#58; &#123;$gmtDate&#125; GMT&quot;&#41;;
    header&#40;&quot;Last-Modified&#58; &#123;$gmtDate&#125; GMT&quot;&#41;;
    header&#40;&quot;Cache-Control&#58; no-cache, must-revalidate&quot;&#41;;
    header&#40;&quot;Pragma&#58; no-cache&quot;&#41;;

    $_SESSION&#91;'link'&#93;   = $_GET&#91;'pagina'&#93; . '.php';
    $_SESSION&#91;'GET'&#93;  = $_GET;

?&gt;

link1.php

teste.php
&lt;p&gt;&lt;font color=&quot;#008000&quot;&gt;ESSE FOI PRO LINK 1
&lt;/font&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;

link2.php

teste.php
&lt;p&gt;&lt;font color=&quot;#008000&quot;&gt;ESSE FOI PRO LINK 2
&lt;/font&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;

^^

to doido atras disso…

jaireltonPJ · Julho 29, 2006, 10:55pm

Qual link vai pro topo?

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

GangPJ · Julho 30, 2006, 5:03pm

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…

system · Dezembro 30, 2015, 3:52am

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

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI