Comunidad de diseño web y desarrollo en internet online

Cambiar contenido dinámicamente con jQuery

Citar            
MensajeEscrito el 10 Sep 2012 09:50 pm
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. :wink:

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 10 Sep 2012 10:37 pm
algo esta mal.. en el codigo, yo vi el demo en ingles y funciona correctamente.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 11 Sep 2012 11:50 am

elporfirio escribió:

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

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? :wink:

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Sep 2012 08:37 pm
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);

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 11 Sep 2012 11:46 pm
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;
   });
});

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Sep 2012 07:03 pm
¿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...

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Sep 2012 09:34 pm
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.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 13 Sep 2012 08:07 am
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.

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Sep 2012 03:37 pm
de la misma manera que cargas un archivo html con ajax, puedes cargar un php.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 13 Sep 2012 03:50 pm
Ya lo he intentado, pero el contenido nuevo aparece sin formato css ni con el js aplicado... :crap:

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Sep 2012 07:01 pm
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. :crap:

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 14 Sep 2012 01:29 am
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è

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

chrome
Citar            
MensajeEscrito el 14 Sep 2012 05:44 pm
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.

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 15 Sep 2012 03:24 am
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

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

chrome
Citar            
MensajeEscrito el 15 Sep 2012 05:47 pm
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.

Por vicenrele

17 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.