(jquery) - Problema al utilizar el método .load desde el div de carga

uikekarallo · #1 (**permalink**) 29/09/2010, 22:15

Como el título del post deja mucho que desear (y es que no hay caracteres suficientes para describirlo mejor), os cuento:

Tengo una página donde todo el contenido se carga a través de jquery por el método .load() desde un archivo llamado content.html en un div llamado #content dentro del index.html. Para esto utilizo una sencilla función.

Ahora me explicaré con más claridad:

Código:

  var pagina = 'content.html ';
  var contacto = '#contacto';

  function ajax_request(pagina,div)
    {
        $('#content').html('<p class="loading"><img src="img/loader.gif" alt="loading..." width="32" height="32" /></p>');
        $('#content').load(''+pagina+div+'');
    }

Hasta ahí todo correcto. Cuando hago click (a través del navbar) en el ancla (<a id="contacto">) me carga correctamente el contenido en el div #content.

Ahora bien, mi problema es que cuando quiero utilizar el mismo sistema dentro del div #content no me funciona.

El código que utilizo en el navbar del index para llamar a la función a través del id es <a id="contacto" title="Contacto">Contacto</a>.

Para llamar de nuevo a esta función, no utilizo de nuevo el mismo id, sinó que le llamo contactoExt, aunque dentro del jscript sí tiene la misma línea:

$('#contactoExt').click(function(){ ajax_request(pagina,contacto); });

Y ahí es donde no me funciona.

Ahora os dejo todo el código:

Código:

// inicio de página principal
	
	$('#content').load('content.html #inicio');

// variable de página de contenido

	var pagina = 'content.html ';
	
// variables del navbar

	var inicio = '#inicio';
	var contacto = '#contacto';

// funcion de llamada

	function ajax_request(pagina,div)
	{
		$('#content').html('<p class="loading"><img src="img/loader.gif" alt="loading..." width="32" height="32" /></p>');
		$('#content').load(''+pagina+div+'');
	}

// navbar

	$('#inicio').click(function(){ ajax_request(pagina,inicio); });
	$('#contacto').click(function(){  ajax_request(pagina,contacto); });

// contactoExt

	$('#contactoExt').click(function(){  ajax_request(pagina,contacto); });

Ok, espero no haber creado mucho lío en la explicación. Pero imaginaros el tiempo que llevo dándole vueltas... Hasta me cuesta pensar con claridad

Lo que necesito es cargar dentro del div #content del index el div #contacto del content.html desde el mismo #content del index. Vaya lío xD

Ya os doy las gracias de antemano por las respuestas... Un saludo.

caricatos · #2 (**permalink**) 30/09/2010, 01:23

Tema movido desde javascript

uikekarallo · #3 (**permalink**) 30/09/2010, 07:48

Ups, no me fijé en el sub-foro! Mis disculpas.

Dany_s · #4 (**permalink**) 30/09/2010, 09:31

porque como agregas elementos dinamicamente son elementos nuevos que no tienen asignados los eventos click, entonces usa el evento live http://api.jquery.com/live/

vos tenes en todas las páginas una estructura igual no?
yo cuando es algo genérico que en todas las páginas tengo el mismo menú, un div con un id donde va el contenido y si siempre quiero cargar el contenido de ese div en un mismo lugar hago un evento en una clases, como en los link, recupero el href, traigo el contenido y lo musestro en un contenedor, y aparte de eso me funciona sin javascript activado

por ejemplo tengo un index y 3 paginas todas con la misma estructura

index.jsp

Código HTML:

Ver original<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    $( function (){
        $('.linkAjax').live('click', function(){
            url = $(this).attr('href');
            $('#contenedor').load(url+' #contenido');
            return false;
        });
    });
  </script>
</head>
<body>
    <div id="menu">
        <a href="index.jsp" class="linkAjax">Inicio</a>
        <a href="uno.jsp" class="linkAjax">Uno</a>
        <a href="dos.jsp" class="linkAjax">Dos</a>
        <a href="tres.jsp" class="linkAjax">Tres</a>
    </div>
    <div id="contenedor">
        <div id="contenido">
            Mi inicio
        </div>
    </div>
</body>
</html>

uno.html

Código HTML:

Ver original<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div id="menu">
        <a href="index.jsp" class="linkAjax">Inicio</a>
        <a href="uno.jsp" class="linkAjax">Uno</a>
        <a href="dos.jsp" class="linkAjax">Dos</a>
        <a href="tres.jsp" class="linkAjax">Tres</a>
    </div>
    <div id="contenedor">
        <div id="contenido">
            Página categoría UNO
        </div>
    </div>
</body>
</html>

dos.html

Código HTML:

Ver original<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div id="menu">
        <a href="index.jsp" class="linkAjax">Inicio</a>
        <a href="uno.jsp" class="linkAjax">Uno</a>
        <a href="dos.jsp" class="linkAjax">Dos</a>
        <a href="tres.jsp" class="linkAjax">Tres</a>
    </div>
    <div id="contenedor">
        <div id="contenido">
            Página categoría DOS
        </div>
    </div>
</body>
</html>

tres.jsp

Código HTML:

Ver original<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div id="menu">
        <a href="index.jsp" class="linkAjax">Inicio</a>
        <a href="uno.jsp" class="linkAjax">Uno</a>
        <a href="dos.jsp" class="linkAjax">Dos</a>
        <a href="tres.jsp" class="linkAjax">Tres</a>
    </div>
    <div id="contenedor">
        <div id="contenido">
            Página categoría TRES
        </div>
    </div>
</body>
</html>

salvo que no agregué los eventos en todas las páginas porque en realidad va en un archivo js aparte para que también si alguien accede a dos.jsp va a seguir funcionar

uikekarallo · #5 (**permalink**) 30/09/2010, 17:33

Ehm, creo que no es la solución que estoy buscando. Bueno, busco una solución o una explicación al por qué de que no me funcione.

Me explico de nuevo con más claridad...

Si intento cargar contenido en el mismo div desde el cual estoy haciendo la llamada, no me funciona.

Si yo desde el navbar (en el index.html) pincho en "contacto" se carga correctamente el div #contacto. Pero si ya tengo cargado ese div y desde él, hay un ancla para que me cargue de nuevo el div #inicio o cualquier otro, ya no funciona.

A ver si alguien me puede dar una explicación de por qué pasa esto.

Si aún así es difícil de entender, pues subo la página a un servidor y os doy el url.

De todas formas, voy a hacer lo que me dices ^^

Gracias again.

Edito: He probado utilizando una simple línea con el método live y a la primera. Me ha liado un poco tu explicación porque yo tan sólo utilizo 3 archivos (index.html, content.html y script.js), pero ya lo he entendido. De todas formas, me gustaría (sé que pido mucho xD) saber el por qué de que con el método .load() no se pueda cargar un div dentro del div cargado, valga la redundancia. Mil Gracias por todo!!!!

Re-Edito: Solucionado y ahora, además, comprendido ^^

marianito89 · #6 (**permalink**) 06/05/2011, 15:51

tengo el mismo problema ami me carga la pagina en el div pero no me funcionan los script que contiene esa pagina