cargar un div en la misma pagina

angel2010 · #1 (**permalink**) 30/04/2011, 15:03

llamar el contenido de un <div id="contenido"></div>
quisera traerme el contenido del div que lo tengo en otra pagina que el usuario selecione varios botones que dicen 1 2 3 cada boton tiene un div y al selecionar uno carge el contenido en la pagina que se encuentra sin salirse

ese yamado lo tengo con un select pero lo quiero con un boton porfavor ayudenme

arepavieja · #2 (**permalink**) 30/04/2011, 15:23

esta función en jquery te puede servir:

Código Javascript:

Ver original<script type="text/javascript">
    $(document).ready(function(){
        $(a).each(function(){
            var href = $(this).attr("href");
            $(this).attr({ href: "#"});
            $(this).click(function(){
                $("#contenido").load(href);
            });
        });
    });
</script>

angel2010 · #3 (**permalink**) 30/04/2011, 15:38

ya consigui uno con ajax es super sencillo y eficas esa parte que me diste no entendi nada

IsaBelM · #4 (**permalink**) 30/04/2011, 16:49

Cita:

Iniciado por angel2010

ya consigui uno con ajax es super sencillo y eficas esa parte que me diste no entendi nada

fácil?? como accedes solamente al contenido de ese bloque?? y las cabeceras?? puedes mostrar el código completo de la página que quieres traer?? es que no entiendo como lo haces

angel2010 · #5 (**permalink**) 01/05/2011, 09:18

Código HTML:

Ver original<!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=utf-8" />
<title>AJAX - Cargar páginas con AJAX</title>
<script type="text/javascript">
function ajaxFunction() {
  var xmlHttp;
  
  try {
   
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
  } catch (e) {
    
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
    } catch (e) {
      
      try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
      } catch (e) {
        alert("Tu navegador no soporta AJAX!");
        return false;
      }}}
}
 
 
 
 
function Enviar(_pagina,capa) {
    var ajax;
    ajax = ajaxFunction();
    ajax.open("POST", _pagina, true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
    ajax.onreadystatechange = function() {
        if (ajax.readyState==1){
            document.getElementById(capa).innerHTML = " Aguarde por favor...";
                 }
        if (ajax.readyState == 4) {
           
                document.getElementById(capa).innerHTML=ajax.responseText; 
             }}
             
    ajax.send(null);
} 
 
 
 
</script>
</head>
 
<body>
<div id="contenedor">
            <div id="encabezado">
            <h1>AJAX: Cargar páginas con AJAX</h1>
  </div>
            
  <ul id="enlaces">
            <li>enlaces</li>
            <li><a href="javascript:Enviar('bio.html','contenido')" title="Mi Biografía">Mi Biografía</a></li>
            <li><a href="javascript:Enviar('blog.html','contenido')" title="Mi Blog">Mi Blog</a></li>
            <li><a href="javascript:Enviar('fotos.html','contenido')" title="Mis Fotos">Mis fotos</a></li>
              <li><a href="javascript:Enviar('pdf.html','contenido')" title="Mis Fotos">PDF</a></li>
            </ul>
          
            <div id="contenido">
              <p><em><strong>INFORMACIÓN:</strong></em></p>
              <p>Ejemplo realizado por: <a href="http://guedea.blogspot.com">Héctor Guedea</a></p>
              <p><span class="test">moc.liamg@aedeugrotceh</span></p>
              <p>Post: <em>&quot;Cargar páginas con PHP y AJAX</em>&quot; en el blog personal <em><strong><a href="http://guedea.blogspot.com">La Postura Inadecuada</a></strong></em></p>
  </div>
 
</div>
 
</body>
</html>

donde estan los enlaces como por ejemplo <li><a href="javascript:Enviar('bio.html','contenido')" title="Mi Biografía">Mi Biografía</a></li> bio.html a lado dice contenido ese el div id="contenido haci de facil es" llama a otra pagina tanto html como php si no entiendes me dices

IsaBelM · #6 (**permalink**) 01/05/2011, 14:14

Cita:

quisera traerme el contenido del div que lo tengo en otra pagina

a ver te explico lo que yo interpreté. en la petición enviabas una variable con el valor "contenido", que era la id de un div de la página que se abre. y querías que en la respuesta solamente se enviara el contenido de ese div. de ahí que dijera

Cita:

puedes mostrar el código completo de la página que quieres traer??

bien, el proceso que realizas es cargar en un div el contenido de una página, lo cual no es correcto, ya que la respuesta te trae los encabezados. esto puedes verlo en cualquier consola

alor86 · #7 (**permalink**) 01/05/2011, 14:18

checa la documentacion de jquery y la funcion load creo que es lo que necesitas te permite cargar secciones de otras paginas

IsaBelM · #8 (**permalink**) 01/05/2011, 14:22

Cita:

Iniciado por alor86

checa la documentacion de jquery y la funcion load creo que es lo que necesitas te permite cargar secciones de otras paginas

permite hacer la petición de una sección determinada??

alor86 · #9 (**permalink**) 01/05/2011, 14:30

asi es puedes hacer perticiones de una seccion de la pagina

Cita:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

Código Javascript:

Ver original$('#result').load('ajax/test.html #container');