elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema al recargar div con AJAX
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Problema al recargar div con AJAX  (Leído 6,571 veces)
javier_r2

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Problema al recargar div con AJAX
« en: 30 Julio 2015, 08:21 am »

Buenos días,

estoy haciendo una aplicación web en la que utilizo ajax para recargar mis páginas. Mi problema es que al recargar un div, si el contenido tiene una altura superior a el contenido anterior, al recargarlo el navegador chrome no me muestra el scroll y por lo tanto el contenido no se ve completo ya que obviamente no puedo bajar con el scroll.

Como peculiaridad, si pincho en la parte superior del navegador y muevo la ventana, de pronto la barra aparecer, pero si en ese momento vuelvo a recargar para mostrar en el div otro contenido, el scroll mantiene el alto del contenido anterior y si bajo con el scroll llega un momento que sobrepasa el contenido del div y se ve página en blanco (de igual forma si vuelvo a mover la ventana del navegador se vuelve a adaptar).

Parece como si el navegador no entendiera correctamente los cambios de altura de la página al recargar los div.

Voy a adjuntar algunas capturas:





Esto solo me pasa en el navegador Chrome, ya que en IE o Firefox lo hace correctamente.

Espero podáis ayudarme. Gracias por adelantado

Mod: Imágenes corregidas


« Última modificación: 30 Julio 2015, 08:26 am por engel lex » En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Problema al recargar div con AJAX
« Respuesta #1 en: 30 Julio 2015, 18:58 pm »

No existe magia para saber el codigo, expon algo del codigo relacionado al problema. Esto es un template?


En línea

javier_r2

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Problema al recargar div con AJAX
« Respuesta #2 en: 30 Julio 2015, 19:32 pm »

Mi código es el siguiente.

Dentro de INDEX.PHP tengo un div con ID="contenedor-escritorio" que es donde cargo todas las páginas de mi aplicación:

Código:
<div class="static-content">
<div id="contenedor-escritorio" class="page-content">

</div> <!-- #page-content -->
</div>

Desde el menú hago la llamada a ajax para mostrar por ejemplo el perfil:

Código:
<ul class="dropdown-menu userinfo">
<li><a href="#" onclick="javascript:cargarContenido('includes_pages/profile/profile.php','contenedor-escritorio');"><span class="pull-left">Perfil de Usuario</span> <i class="pull-right fa fa-user"></i></a></li>
</ul>

Y mi código ajax recibe las variables y las procesa:

Código:
function nuevoAjax(){

     try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
          try {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) {
               xmlhttp = false;
          }
     }

     if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
          xmlhttp = new XMLHttpRequest();
     }

     return xmlhttp;
}

function cargarContenido(pagina,destino){

    var contenedor;
    var ajax;           

    contenedor = document.getElementById(destino);

    ajax = nuevoAjax();
    ajax.open("GET", pagina, true);
    ajax.onreadystatechange=function() {
         if (ajax.readyState==4) {
              contenedor.innerHTML = ajax.responseText;
         }
     }

     ajax.send(null);
     return false;     
}

Y me recarga correctamente el div, con el problema que he comentado arriba. Solo me pasa con Chrome, ya que con IE y Firefox funciona perfecto.

He probado varias formas de recargar el div, como por ejemplo mediante post y tampoco. Me carga también perfecto pero sigue sin entender la medida correctamente Chrome y no me muestra el scroll.

Código:
function carga_perfil(){
     $.post("includes_pages/profile/profile.php", function(data){
          $("#contenedor-escritorio").html(data);
     });
}
« Última modificación: 30 Julio 2015, 19:40 pm por javier_r2 » En línea

javier_r2

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Problema al recargar div con AJAX
« Respuesta #3 en: 8 Agosto 2015, 13:30 pm »

Nadie sabe como puedo solucionarlo?
En línea

javier_r2

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Problema al recargar div con AJAX
« Respuesta #4 en: 29 Agosto 2015, 13:30 pm »

No consigo encontrarle solución...  :-( ¿Alguien tiene idea de porqué pasa?
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Problema al recargar div con AJAX
« Respuesta #5 en: 30 Agosto 2015, 01:41 am »

No es un error de javascript. Eso tiene que ver con los estilos que estes aplicando y el contenido HTML que tengas.
En línea

javier_r2

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Problema al recargar div con AJAX
« Respuesta #6 en: 30 Agosto 2015, 13:38 pm »

Pero MinusFour, si fueran los estilos y el html, no crees que también me ocurriría en otros navegadores?. He provado a cambiar el overflow de diferentes capas pero lo único que consigo es que aparezca un scroll dentro de la página y yo lo que quiero es que aparezca el del propio navegador.
En línea

DeMoNcRaZy


Desconectado Desconectado

Mensajes: 420


$~*|_


Ver Perfil
Re: Problema al recargar div con AJAX
« Respuesta #7 en: 30 Agosto 2015, 13:43 pm »

si fueran los estilos y el html, no crees que también me ocurriría en otros navegadores?.

No sé, si sabes que no todos los navegadores son compatibles con todas las páginas. Por lo que has que adaptarlas a dicho navegador si quieres una compatibilidad global.

Ej: IE no mostrará el contenido igual que en Chrome.

Saludos.
En línea

Esta página web no está disponible - Google Chrome
javier_r2

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Problema al recargar div con AJAX
« Respuesta #8 en: 30 Agosto 2015, 15:05 pm »

Entiendo lo que comentas. Pero si fuera problema del estilo entonces no aparecería la barra al mover la ventana. Fíjate el las capturas como enseño que cuando recargo el div y luego muevo el navegador con el ratón desde la barra de arriba sale la barra de desplazamiento. Y es más cuando sale y vuelvo a recargar el div y esta vez el alto es menor, el scroll sigue manteniéndome el tamaño anterior y por lo tanto baja más de lo que tiene que bajar. Y claro si vuelvo a mover la ventana del navegador con la barra superior se adapta correctamente al tamaño de nuevo.
En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Problema al recargar div con AJAX
« Respuesta #9 en: 31 Agosto 2015, 15:42 pm »

1) No uses AJAX 'manual', mejor implementalo con jQuery y te olvidas del crossbrowser.
2) Si vas a aplicar estilos CSS3 te recomiendo usar el prefijo para cada navegador, o si es posible usar un framework UI como jQuery UI o Boostrap 3
En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Tutorial] - Login con ajax . Mysql || Php con clases || Ajax « 1 2 »
PHP
Hadess_inf 15 27,048 Último mensaje 9 Diciembre 2010, 02:44 am
por delorian15
[SOLUCIONADO][PROBLEMA]Error al recargar .bashrc
GNU/Linux
RyogiShiki 7 9,533 Último mensaje 22 Enero 2011, 18:07 pm
por RyogiShiki
Problema con AJAX
Desarrollo Web
Feedeex 1 2,450 Último mensaje 1 Julio 2011, 19:20 pm
por Nakp
[Solucionado] ¿Como puedo recargar un PHP include sin recargar la web?
Desarrollo Web
Varlch 8 7,189 Último mensaje 4 Diciembre 2014, 19:07 pm
por Varlch
[Resuelto] paginación rompe pagina cargada con ajax al recargar
Desarrollo Web
gAb1 2 2,007 Último mensaje 7 Noviembre 2015, 04:47 am
por gAb1
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines