Modo listagem | Modo Linear

Ribeiro · (Esta mensagem foi modificada pela última vez a: 24-07-2009 12:09 por Ribeiro.)

Boas pessoal!!

Estou com problemas em resolver uma situação em Ajax, se me pudessem dar umas dicas, agradecia.
O problema é o seguinte: estou a desenvolver um site e quero implementa-lo com Ajax, então o que fiz foi criar um “div id=main” na minha pagina html que se divide em “div id=left”, que contem um menu de links e “div id=right”.
A ideia passa por carregar, por exemplo num link e através de Ajax fazer com que a informação apareça no lado direito(e funciona). O senão é que apenas funciona se substituir os links por botões.
Alguém tem ideia como fazê-lo com links??

O código do ficheiro de Jscript(ajax.js):

Código:

var xmlHttpRequest = null;

 //Função que cria o Objecto XmlHttpRequest

 function criarObjectoXmlHttpRequest()

 {

    if (window.XMLHttpRequest)

    {

      xmlHttpRequest = new XMLHttpRequest()

    }

    else if (window.ActiveXObject) 

    {

      xmlHttpRequest = new ActiveXObject("Microsft.XMLHTTP")

    }

      if (xmlHttpRequest == null)

        alert("Erro ao criar o objecto XMLHttpRequest!");

 }

 //Efectua o pedido ao servidor da informação contida no ficheiro nosso_clube.html

 function efectuarPedido()

 {

    criarObjectoXmlHttpRequest();

    var url="nosso_clube.html";

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

    xmlHttpRequest.onreadystatechange = actualizarPagina;

    xmlHttpRequest.send(null);

 }

 //Actualiza o pagina html com a informação proveniente do servidor

 function actualizarPagina()

 {

  if (xmlHttpRequest.readyState == 4)

  {

    var novaPagina = xmlHttpRequest.responseText;

    document.getElementById("right").innerHTML = novaPagina;

  }

 }

Código do ficheiro de html:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head> 

  <script type="text/javascript" src="ajax.js"></script>

  </head>

      <body>

          <div id="content">

           <div id="back">

              <div id="header">

                <img src="simbolo.PNG"/>

              </div>

           <div id="main">

                 <div id="left">

<!-- <input type="button" value="Pedido" onClick="efectuarPedido()"/>--> 

<a href="" onClick="efectuarPedido()">O nosso clube</a>

<a href="" onClick="efectuarPedido()">Equipa</a>

<!-- Nesta parte tenho mais links, mas são todos iguais aos de cima -->

                 </div>

                 <div id="right"> </div>

          </div>

          </div>

          </div>    

  </body>

</html>

Neste ultimo ficheiro decidi apagar algumas linhas que não são importantes para o problema em questão, de modo a simplificar ao máximo para quem esta a ver.

O ficheiro "nosso_clube.html", apenas contem um paragrafo (fiz o paragrafo só para testar). Outra situação em que irei "esbarrar" será na função "efectuarPedido", já que neste momento apenas esta feita para pedir ao servidor um url, mas a solução final terá de fazer pedidos a todos os html´s que estão no servidor consoante o link clicado. Mas irei ver isso mais lá para a frente.

Cumprimentos. Smile

Bruno Bernardino · 24-07-2009, 12:26

O ideal mesmo é usar jQuery (com JSON para Ajax, em vez de plain text ou plain html), e teres alguma informação inicialmente (por causa dos crawlers).

Mas, respondendo simplesnnete à tua questão, tens duas opções:

Alterar
<code>
<a href="" onClick="efectuarPedido()">O nosso clube</a>
</code>

Para

<code>
<a href="#" onClick="efectuarPedido();">O nosso clube</a>
</code>

Ou

<code>
<a href="jvoid(0);" onClick="efectuarPedido();">O nosso clube</a>
</code>

e repetires o procedimento para outros links.

Outra nota: deverias considerar usar XHTML Strict para "limpar" ao máximo o código HTML e separar as coisas muito bem entre Server-side e Client-side, sendo que terias de ter muitos mais cuidados e o uso de jQuery (ou Mootools) seria quase obrigatório, porque caso contrário terias de escrever muitas linhas de javascript para tudo funcionar perfeitamente em todos os browsers Smile

Ribeiro · 24-07-2009, 13:57

Obrigado Bruno por responderes simplesmente à minha questão (já testei e funciona), mas mais ainda pelas outras sugestões que fizeste (vou segui-las).
Tenho muito para pesquisar e apreender.

ruicosta

Boa tarde,

Começo por te explicar, aquilo que respondi ao teu comentário:

Maos à obra:

Adicionar à nossa página o JQUERY - Download com esta linha:

Código:

<script type="text/javascript" src="jquery-1.3.2.min.js "></script>

Desta forma, podemos utilizar esta leve e prática IDE. Passemos ao teste que ditará se está a funcionar ou não:

Código:

<html>

    <head>

        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

        <script>

            $(document).ready(function(){

                alert('está a funcionar!');

            });

        </script>

    <head>

    <body>

    </body>

</html>

Apareceu o alerta com a mensagem? Óptimo. Seguindo em frente.

Código pronto e a funcionar e comentado:

Código:

<html>

    <head>

        <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.2.3.pack.js"></script>

        <script>

            $(document).ready(function(){

                $("li a").click(function(){ //absorve o evento CLICK da Hiperligação que esta dentro da tag LI

                    var id  = $(this).attr("id");

                    $.ajax({

                        method: "get",url: "conteudos.php",data: "pag=" + id,

                        success: function(html){ // se o houver sucesso na comunicação, o texto é guardado na variável html

                            $("#conteudo").html(html); //Coloca o conteúdo da variável no DIV com ID conteudo

                        }

                    }); 

                    return false; //Interrompe o funcionamento normal de um link, desde que o javascript esteja ligado

                    //caso contrário funciona o simples HTML

                }); 

            });

        </script>

    <head>

    <body>

        <div id="menu">

            <ul>

                <li><a href="conteudos.php?pag=1" id="1" title="Sapo">Link 1</a></li>

                <li><a href="conteudos.php?pag=2" id="2" title="Google">Link 2</a></li>

            </ul>

        </div>

        <div id="conteudo"></div>

    </body>

</html>

conteudos.php

Código:

<?php

$p = $_GET['pag'];

switch($p){

    case "1";

        echo "Link 1";

        break;

    case "2";

        echo "Link 2";

        break;

    default;

        echo "Texto por omissão";

}

?>

Qualquer dúvida ou comentário agradeço.

Abraços e beijinhos