Cambiar el contenido de un div con un href

matucasal · #1 (**permalink**) 09/06/2009, 17:01

Hola gente de javascript.
Soy bastante novato en el tema de javascript, pero por lo que he visto es bastante fuerte, y queria ver si se podia hacer lo siguiente:
Yo tengo mi pagian dividida en 4 divs.
-Head
-Menu
-Content
-Footer

Ahora lo que quiero saber, es si al presionar un href del menu, por ej href='fotos.php' (por decir de algo), no se abra toda la pagina desde 0, es decir que lo unico que suceda es que se modifique la parte del content, por la que esta en fotos.php
Nose como podria hacerse, por ahi haciendo que los demas divs, queden iguales y solo se reemplace el del content, o de alguna otra manera
No lo se aun.
Muchas gracias
Matias!

edit :
Encontre algo con jquery, pero no me funciona del todo bien, ahora lo muestro
newjavascript.js

Código:

<script type="text/javascript" src="jquery.js"></script>
 
      function getPagina(num) {

          $.post(

              'proceso.php','saracatunga.php',

              {
              'pagina': num

              },

              function(a,s) {

                  // OK

                  if (s == 'success') {

                      $("div#resultados").html(a);

                  } else {

                      alert('error desconocido, comprueba tu conexion a Internet');
                  }

              }

          );

      }

aca el index

Código HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
   <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="newjavascript.js"></script>


   </head>
    <body>

      <div>
             <a href="javascript:getPagina(1);">Primero</a>
             <a href="javascript:getPagina(2);">Segundo</a>
    </div>
      <div id="resultados"></div>
    </body>
</html>

Esto funciona perfecto con el link 1(proceso.php) pero no se donde poner para dirigirme al link 2 ( saracatunga.php) si alguien lo sabe le agradeceria que me ayude
MUchas gracias nuevamente

quimfv · #2 (**permalink**) 10/06/2009, 01:41

AJAX

Todo lo que describes se hace con ajax....!!!!

Quim

matucasal · #3 (**permalink**) 10/06/2009, 08:22

Mira logre hacerlo, pero me surgio un nuevo problema.
Implemente ajax y me salio lo que queria. Pero ahora el problema se me hace con las fotos.
Ahoea funcioca la parte del ajax http://www.pareddupla.com.ar/otroinicio.php
Pero al querer acceder a la galeria (queestaba hecha en jqery) no funciona como antes.
La verdadera galeria esta en http://www.pareddupla.com.ar/fotos.html
y la que me sale ahora ( ingresen en la seccion fotos de http://www.pareddupla.com.ar/otroinicio.php ) no es la misma. Hay alguna forma de solucionarlo?
Aca dejo parte de los codigos
este es el ajax.js

Código:

function llamarasincrono (url, id_contenedor)
{
    var pagina_requerida = false;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        pagina_requerida = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versión antigua
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    }
    else
    return false;
    pagina_requerida.onreadystatechange = function ()
    {
        // función de respuesta
        cargarpagina (pagina_requerida, id_contenedor);
    }
    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
    pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
    if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
    document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}

y aqui mi html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Pared Dupla</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Pared Dupla</title>
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" language="javascript" src="elreproductorflash/niftyplayer.js"></script>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>

</head>

<body>
<div id="wrapper">
<div id="header">
<h1>PARED DUPLA</h1>
</div>
<div id="menu">
<ul>
<li><a href="javascript:llamarasincrono('contentindex.html', 'content');">Inicio</a></li>
<li><a HREF="http://www.myspace.com/pareddupla" TARGET="_BLANK">My Space</a></li>
<li><a href="javascript:llamarasincrono('contentfotos.html', 'content');">Fotos</a></li>
<li><a href="#"></a></li>

          
</ul>
</div>
<div id="content"></div>

y sigue
y aca el contentfotos.html

Código HTML:

<ul class="gallery">
<li><img src="images/fondocopado.jpg" title="" alt="Image01"></li>
<li><img src="images/azules.jpg" title="" alt="Image02"></li>
<li><img src="images/envivo1.jpg" title="" alt="Image03"></li>
<li><img src="images/letra.jpg" title="" alt="Image04"></li>
<li><img src="images/vivo2.jpg" title="" alt="Image05"></li>
</ul>

Si saben como puedo arreglarlo se los agradeceria