Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: javier_r2 en 30 Julio 2015, 08:21 am



Título: Problema al recargar div con AJAX
Publicado por: javier_r2 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:
(http://nsae02.casimages.net/img/2015/07/30/150730082056437117.jpg)
(http://nsae02.casimages.net/img/2015/07/30/150730082058758039.jpg)
(http://nsae02.casimages.net/img/2015/07/30/150730082101466551.jpg)
(http://nsae02.casimages.net/img/2015/07/30/150730082103291796.jpg)

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


Título: Re: Problema al recargar div con AJAX
Publicado por: EFEX 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?


Título: Re: Problema al recargar div con AJAX
Publicado por: javier_r2 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);
     });
}


Título: Re: Problema al recargar div con AJAX
Publicado por: javier_r2 en 8 Agosto 2015, 13:30 pm
Nadie sabe como puedo solucionarlo?


Título: Re: Problema al recargar div con AJAX
Publicado por: javier_r2 en 29 Agosto 2015, 13:30 pm
No consigo encontrarle solución...  :-( ¿Alguien tiene idea de porqué pasa?


Título: Re: Problema al recargar div con AJAX
Publicado por: MinusFour 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.


Título: Re: Problema al recargar div con AJAX
Publicado por: javier_r2 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.


Título: Re: Problema al recargar div con AJAX
Publicado por: DeMoNcRaZy 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.


Título: Re: Problema al recargar div con AJAX
Publicado por: javier_r2 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.


Título: Re: Problema al recargar div con AJAX
Publicado por: [u]nsigned 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


Título: Re: Problema al recargar div con AJAX
Publicado por: MinusFour en 31 Agosto 2015, 16:00 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.

No entiendo este razonamiento. Tienes un error de presentación, tu javascript no hace nada con la presentación de tu HTML. Lo único que haces es usar innerHTML para agregar el texto. Ahora tu dices: "Si fuera un error de presentacion pasaria en los otros navegadores". Y esto simplemente no es cierto. Varias veces he tenido estilos que funcionan en todos los navegadores menos en uno.


Título: Re: Problema al recargar div con AJAX
Publicado por: javier_r2 en 1 Septiembre 2015, 00:39 am
Lo que quería decir es que si fuera un error de estilos, al mover la ventana no aparecería como por arte de magía. De todas maneras he conseguido hoy solventarlo forzando al body a esconder y luego volver a mostrar la propiedad overflow. Al final el código ajax ha quedado de la siguiente manera.

Código:
function carga_preview_temp(){
$("document").ready(function(){
var select_filter_fecha = $("#select_filter_fecha").val();
var filter_excl = $('#tags_exlc').tagsinput('items');
var filter_cont = $('#tags_cont').tagsinput('items');

$.ajax({
url: ("carga_prev_tmp.php"),
data: {select_filter_fecha: select_filter_fecha,filter_excl: filter_excl,filter_cont: filter_cont},
type: 'post',

beforeSend : function(){
$('#btn_carga_preview_temp').hide();
$("#div_prev_lista_temp").hide();
$('#loader-carga-pre-temp').show();
document.body.style.overflow = "hidden";
},

success: function(data){
if(data != "NO HAY MEDIOS"){
$("#div_prev_lista_temp").html(data);
$("#div_prev_lista_temp").show();
$('#loader-carga-pre-temp').hide();
$('#btn_carga_preview_temp').show();
document.body.style.overflow = "auto";
}else{
$('#loader-carga-pre-temp').hide();
$('#btn_carga_preview_temp').show();
$('#wizard').stepy('step', 2);
new PNotify({
title: 'NO HAY MEDIOS',
text: 'No hay medios cargados en el almacén. Seleccione primero un medio para poder cargar la vista previa.',
styling: 'fontawesome'
});
}

},

error : function(jqXHR, status, error){
       alert('Disculpe, existió un problema. Vuelva a intentarlo más tarde. Si el problema persiste, póngase en contacto con el servicio técnico.');
       location.href = "new_list.php";
   }
});

});
 }

En beforeSend le digo que me oculte el overflow y cuando entra en success le digo que sea automático. De momento me funciona correctamente todo en todos los navegadores. No se si será lo correcto, pero si a alguien le ocurre pues aquí puede tener esa solución.

Un saludo y gracias a todos los que habéis participado!