Cambiar contenido dinámicamente con jQuery

[vicenreler]

Hola a todos!

Necesito ayuda urgente. Estoy desarrollando una aplicación web y necesito cargar/cambiar contenido de forma dinámica, sin recargar la página. Ese contenido en concreto son tabs jQuery que quiero cargar de un archivo html. A continuación describo los scripts con los que he probado, pero lo más que he conseguido ha sido cargar el contenido sin que se haya aplicado bien los .css y .js (aunque los links de estos archivos están correctos).
Con los dos siguientes scripts, se carga bien el contenido y su formato la primera vez. Pero si se vuelve a pulsar el botón muestra el contenido sin el js ni css.

Código:

function cargar(div, origen){
     $(div).load(origen);
}

Código:

function cambiarContenido(archivo){
        document.getElementById("container").innerHTML = $("div#container").load(archivo);
}

El siguiente ejemplo (en español y el original en inglés) que he probado ni siquiera muestra bien el contenido la primera vez que se pulsa el botón:
[URL="http://www.colordeu.es/BLOG/minisite-cargar-contenido-dinamicamente-con-mootools-sin-cambiar-de-pagina"]http://www.colordeu.es/BLOG/minisite-cargar-contenido-dinamicamente-con-mootools-sin-cambiar-de-pagina[/URL]
[URL="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/"]http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/[/URL]

¿Alguien tiene alguna idea?
Gracias. ;)

[suap]

hola vicenreler.

en lo personal no me gusta trabajar mucho utilizando el innerHTML o lo que es el $().html(); con jquery, ambos son lo mismo y se tienen que hacer otras verificaciones de la hoja.

la solucion a tu problema puede comerzar con utilizar el el .live() de jquery, este te permite hacer una leida nuevamente de la pagina como si la hubieras recargado, claro hay que hacer referencia al objeto que deseas modificar, te explico cuando tu insertas algo con .html(); aparece automaticamente en la hoja pero para el javascript que ya se econtraba en la pagina antes de insertar el nuevo codigo no le es posible leerlo, de esta manera tenemos que usar el .live() de jquery.

Código:

$("#div_innerhtml").live("click",function(){
});

ese div fue insertado con el innerHTML o .html(); entonces cuando lo desees usar nuevamente con un click necesitas hacer uso de el .live();

espero ayudarte con esta respuesta.

[Dradi7]

Iniciado por suap

hola vicenreler.

en lo personal no me gusta trabajar mucho utilizando el innerHTML o lo que es el $().html(); con jquery, ambos son lo mismo y se tienen que hacer otras verificaciones de la hoja.

la solucion a tu problema puede comerzar con utilizar el el .live() de jquery, este te permite hacer una leida nuevamente de la pagina como si la hubieras recargado, claro hay que hacer referencia al objeto que deseas modificar, te explico cuando tu insertas algo con .html(); aparece automaticamente en la hoja pero para el javascript que ya se econtraba en la pagina antes de insertar el nuevo codigo no le es posible leerlo, de esta manera tenemos que usar el .live() de jquery.

Código:

$("#div_innerhtml").live("click",function(){
});

ese div fue insertado con el innerHTML o .html(); entonces cuando lo desees usar nuevamente con un click necesitas hacer uso de el .live();

espero ayudarte con esta respuesta.

Live ya no se usa se encuentra deprecado para tal cosa puedes usar delegate o on que es mas actualizado

[vicenreler]

Gracias por contestar. Estoy intentandolo con on pero lo único que consigo es asociar el evento "click" a un elemento en vez de al document entero. De esta manera tengo el mismo problema y muestra el nuevo contenido sin los js y css aplicados. Estoy haciendo lo siguiente:

Código:

$(document).ready(function() {
  $( "#menu" ).on( "click", "li a", function( e ) {
		var toLoad = $(this).attr('href')+' #container';
		$('#container').hide('fast',loadContent);
		window.location.hash =                  $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#container').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#container').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
	});
});

Por cierto, en algún ejemplo que he visto en el que se reemplazaba contenido añadiendo otro archivo html, ese archivo contenía la página entera con el contenido nuevo en vez de contener solamente los elementos nuevos. Me parece un poco redundante. No sé qué opináis. El ejemplo:
[URL="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/"]http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/[/URL]

[Dradi7]

Bueno

Pero el ejemplo que tienes es de una muy buena pagina solo adpatalo a lo que necesitas en cuanto a lo que mencionas sobre cargar toda la pagina seria mejor conveniente como dices cargar solo los elementos necesarios

Saludos

[vicenreler]

Iniciado por Dradi7

Bueno

Pero el ejemplo que tienes es de una muy buena pagina solo adpatalo a lo que necesitas en cuanto a lo que mencionas sobre cargar toda la pagina seria mejor conveniente como dices cargar solo los elementos necesarios

Saludos

Claro, el ejemplo ya lo tengo adaptado. Pero como he dicho antes, los elementos no se cargan adecuadamente. Si una vez cargados le doy a actualizar la página, se cargan bien, pero si no no.

[vicenreler]

Resuelto:

on tenía que utilizarlo en la primera línea para llamar al evento "ready".

Código:

$( document ).on( "ready",function( e ) {

Muchas Gracias Dradi7. Ahora el problema es que no sé cómo hacer para que los archivos .html que cargo, no tengan todo el contenido de la página, porque ahora lo estoy haciendo con todo porque de otra manera no funciona. ¿Alguna idea?

[vicenreler]

¿Nadie sabe cómo puedo agregar contenido nuevo sin repetir toda la página en el documento nuevo que se muestra? Lo necesito porque tengo que combinar contenidos según presiono varios checkboxes y creo que crear tantos archivos html como combinaciones tenga, no está muy bien que digamos...

[vicenreler]

¿A nadie se le ocurre cómo se puede hacer?
Otra cosa que me he fijado es que si cargo contenido de otro html y en ese hay un include o require en php de otro html, éste html último no se carga.

[vicenreler]

Iniciado por vicenreler

Otra cosa que me he fijado es que si cargo contenido de otro html y en ese hay un include o require en php de otro html, éste html último no se carga.

Esto último lo he solucionado cambiando el formato de los archivos a php, por si le sirve de ayuda a alguien...

[vicenreler]

Además, cuando pruebo en un smarphone y cargo el contenido nuevo, el navegador vuelve se pone a cargar en vez de hacerlo dinámicamente. El código que uso lo he cogido de la url siguiente y SÍ se carga dinámicamente también en smartphone:
[URL="https://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html"]https://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html[/URL]
El contenido que cambia está en un div con id "dinamico", y uso el código que está a continuación:

Código:

$( document ).on( "ready",function( e ) {	
	var hash = window.location.hash.substr(1);
	var href = $('#menu li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #dinamico';
			$('#dinamico').load(toLoad)
		}											
	});
     $( "#menu" ).on( "click", "li a", function( e ) {								  
		var toLoad = $(this).attr('href')+' #dinamico';
		$('#dinamico').hide('fast',loadContent);
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#dinamico').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#dinamico').show('normal'); //,hideLoader());
		}
		return false;		
	});
});

Por eso no entiendo por qué no consigo lo que pretendo hacer.