Cambiar contenido dinámicamente con jQuery

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 Javascript :

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

Código Javascript :

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]
[url=http://net.tutsplus.com/articles/editorials/jquery-in-2013-or-how-to-properly-drop-ie/]
¿Alguien tiene alguna idea? Gracias.

algo esta mal.. en el codigo, yo vi el demo en ingles y funciona correctamente.

elporfirio escribió:

El demo está realizado con texto e imágenes, pero no con contenido jQuery como son las tabs. Y con esto no funciona porque además el código lo he descargado de esa página. Todos los ejemplos que he encontrado en la web son con texto...¿Alguien me puede ayudar?

Aaaah ya entiendo, tienes Jquery en la página.. okay ¿ como tienes tu codigo Jquery ?.. es decir ¿lo cargas con el dom?

Código Javascript :

$(document).on("ready", doit);

Por que obvimente solo funcionará la primera vez.. tienes que activarlo con otro evento.. por ejemplo

Código Javascript :

$("#seccionA").on("click", misTabs);

Muchas gracias elporfirio. Lo he resuelto. 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, de otra manera no funciona. Es decir, para cargar nuevo contenido estoy llamando un .html con toda la página más el contenido nuevo. De esta manera me parece un poco redundante ¿Alguna idea? El código que uso es:

Código Javascript :

$( document ).on( "ready",function( e ) {   
           $( "#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;
   });
});

¿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...

Tendrías que usar en vez de muchos archivos html, un solo php que imprima solo el codigo html que necesites dependiendo de los parámetros que le pases.

Pero con el código jQuery que estoy usando, utilizo otros archivos html. Si hiciera lo que me dices, tendría un php enorme porque es mucho contenido. De todas maneras no entiendo bien lo que propones con php porque lo que yo quiero hacer es cargar el contenido con AJAX.

de la misma manera que cargas un archivo html con ajax, puedes cargar un php.

Ya lo he intentado, pero el contenido nuevo aparece sin formato css ni con el js aplicado...

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][/url]
El contenido que cambia está en un div con id "dinamico", y uso el código que está a continuación:

Código Javascript :

$( 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.

Lo que tienes que hacer es usar filter asi cuando llames un html por ajax en el callback solo haces fliter por ejemplo del div del nuevo contenido sin la necesidad de las demas etiquetas que tengas, y en tu hoja de estilos solo pones el selector y listo le puedes aplicar css al contenido traido dinamicamente.

Noè

Noé. Gracias por tu atención, pero me parece que haciendo lo que dices, es decir, seleccionando con filter el código html del nuevo documento que quiero añadir, es lo mismo que si selecciono el documento entero pero en vez de estar la página repetida con todo lo anterior más lo que quiero añadir, está solo lo que quiero añadir. Y así he probado y no funciona.
Mi intención es no tener que tener muchos html con cosas repetidas. Y el otro problema, es que no lo está haciendo de manera dinámica (al menos en smartphone porque en escritorio no se aprecia) y se tiene que cargar la página. En cambio en el ejemplo de la página que he cogido el código SI cambia el contenido de forma dinámica.

entonces solo carga lo que ocupes ya sea que provenga de un back-end (PHP ) tal como te lo comentaron mas arriba estos datos es mejor tratarlos en formato JSON o XML.

Noe

Perdona Noé. Pero no entiendo lo que dices. Lo que quiero que cargue estará en el back-end, sí. Pero lo que intento es que no se recargue la página. Entonces, una de dos: o se carga todo el contenido posible al principio y solo se muestra el que se elija, o se carga solamente el contenido que se elija pero sin recargar la página. De todas formas, no sé cómo hacerlo de ninguna de esas maneras.