Cargar página en un div

Hace unas semanas te escribí para ver como podía hacer para cargar una página en un div según al enlace que pulsases. Me explico tengo un div menu y un div content, según el enlace que pulse del menu muestra una página u otra en el div content.
Ya se que puedo usar AJAX o jQuery, pero con ajax no consigo nada y con jquery no me la carga en el div sino en toda la ventana(elimina el div menu).
COn jquery:
<script type="text/javascript" src="js/jquery-1.3.2.min.js">
$(document).ready(function(){
   $("#menu").each(function(){
      var href = $(this).attr("href");
      //$(this).attr({ href: "#"});
      $(this).click(function(){
         $("#content").load(href);
      });
   });
});
</script>
CON AJAX:
<script type="text/javascript" src="js/comprobacion.js"></script>
<a href="javascript:cargar_pag('autoescuelaVista.php')">Datos autoescuela</a>
en comprobaciones.js tengo:
function crearXMLHttpRequest()
{
    var xmlhttp=null;
    if(window.ActiveXObject) //Internet Explorer
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    else
        xmlhttp = new XMLHttpRequest();
    return xmlhttp;
}
function cargar_pag(pagina)
{
    var conexion;
    conexion = crearXMLHttpRequest();
    conexion.onreadystatechange = function()
    {
        if (conexion.readyState == 4)        
            document.getElementById('content').innerHTML = conexion.responseText;
    }
    conexion.open("POST", pagina, true);
    conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    conexion.send(null);
}
Espero que me puedas ayudar, porque por más que miro tutoriales y ejemplos no consigo nada.
Respuesta
1
Te recomiendo que uses jquery tal y como lo estás haciendo. Lo único que cambiaría para evitar problemas es que en vez de usar links en el menú (a href) uses por ejemplo, con un atributo "href" en cada uno. Pruébalo y me cuentas:
Carlos.
No entiendo muy bien lo que quieres decir. ¿Span no es como un div?
Te refieres que en vez de poner :
<p><a href="matricularVista.php" id="enlace1">Realizar Contrato</a></p>
poner <span href="matricularVista.php">Realizar Contrato</span>
NO lo entiendo, ¿me puedes poner un ejemplo?
Efectivamente, un span es como un div. Lo que trato de conseguir es que no se mezcle en href del link con el evento onclick del mismo link, es decir, que por una parte ejecute el onClick pero que además, redireccione a la url del href, no se si me explico...
Prueba a poner en tu código el span, tal y como lo has puesto, aunque le tendrías que dar el id "menu" para que tire el jquery. Por cierto, yo lo que haría es en vez de usar id's para identificar el elemento en jquery, es usar un estilo, por ejemplo:
<span class="spanMenu" href="pagina1.php">PAGINA 1</span>
<script type="text/javascript" src="js/jquery-1.3.2.min.js">
$(document).ready(function(){ 
$(".spanMenu").each(function(){
var href = $(this).attr("href");
$(this).click(function(){
$("#content").load(href);
});
}); 
});
</script>
Carlos, pero sin no pongo <a href> no me deja pulsarlo porque al fin y al cabo es un texto normal.
<span class="spanMenu" href="pagina1.php">PAGINA 1</span>
¿Cómo lo hago?
Sí que te dejará pulsarlo, porque en el script de jquery le estas asignando a cada span un onClick:
$(this).click(function(){ 
  $("#content").load(href); 
});
Ya se que le hemos asignado un onclick, pero el texto del menu aparece sin subrayar(no como un link) y aunque pulse no hace nada.
<script type="text/javascript" src="js/jquery-1.3.2.min.js">
$(document).ready(function()
{
   $(".spanMenu").each(function()
     {
          var href = $(this).attr("href");
          $(this).click(function(){
            $("#content").load(href); });
   });
});
</script>
<div id="menu" style="position:absolute; width:249px; height:617px; z-index:1; left: 6px; top: 10px; visibility: visible">
<p><span class="spanMenu" href="matricularVista.php">Realizar Contrato </span></p>
<p><span class="spanMenu" href="pagina2.php">pagina2 </span></p>
.....</div>
<div id="content" style="position:absolute; width:705px; height:616px; z-index:4; left: 257px; top: 11px; visibility: visible">
hola
</div>
Creo que estás mezclando la importación del script de jquery con el que hay en tu página. Prueba con:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
<script>
$(document).ready(function() 

   $(".spanMenu").each(function() 
     { 
          var href = $(this).attr("href"); 
          $(this).click(function(){ 
            $("#content").load(href); }); 
   }); 
}); 
</script>
Por lo demás, todo parece correcto. Si quieres que el texto se subraye, defínelo en el estilo "spanMenu" dentro de la hoja de estilos. También le puedes poner "cursor:pointer" para que aparezca la manita en vez del cursor normal.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas