jQuery .load() problema en todas las versiones de IE

Question

Estoy tratando de hacer una plantilla dinámica. Tengo enlaces en la barra lateral y quiero cargar el contenido dinámicamente con .load() en jQuery.

Tengo el siguiente código de jQuery para ello:

// Services AJAX page loader 
jQuery('.sidenav a').click(function(){ 
    $page_url = jQuery(this).attr('href'); 

    // load page 
    jQuery('#content').fadeOut(200, function() { 
    jQuery(this).load($page_url, function(response, status, xhr) { 
    jQuery(this).fadeIn(200); 
    }); 
    }); 

    // set pagetitle 
    jQuery('.pagetitle span').text(jQuery(this).contents().first().text()); 

    // change CSS current_page_item 
    jQuery('.sidenav li').removeClass('current_page_item'); 
    jQuery(this).parent().addClass('current_page_item'); 

    return false; 
}); 

Básicamente funciona muy bien excepto en IE.

El problema ocurre cuando hago clic en el enlace que primero se cargó sin AJAX. Puede ver un ejemplo here. Cuando haces clic en "Perfil/visión" en la barra lateral, cargará todo el sitio en el div # contenido de nuevo. Solo ocurre en IEs, en TODAS las versiones. En otros navegadores funciona normalmente.

¿Alguna idea de cuál puede ser el problema?

Gracias.

Answer 1

Creo que es un problema de almacenamiento en caché ..

Dado que la URL es la misma que la página actual, es decir, usos de la memoria caché (con toda la página) y lo inserta en el #content div ..

Trate de añadir una marca de tiempo a petición .load()

.load($page_url,{noncache: new Date().getTime()},function(){..})

Answer 2

parece que está confiando en el:

X-Requested-With: XMLHttpRequest 

encabezado en la solicitud AJAX para decidir si enviar una página completa en respuesta, o solo el contenido principal.

No haga esto. No es 100% confiable que el encabezado sobrevivirá a su viaje al servidor, y confunde el almacenamiento en caché si puede devolver diferentes respuestas dependiendo de este encabezado. Esto es lo que está sucediendo con IE: intenta cargar http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ en el área de contenido, pero IE ya tiene http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ en su caché porque esa también es la dirección de la página completa. En consecuencia, IE utiliza la página completa en caché.

Otros navegadores con otras estrategias de almacenamiento en caché y proxies web también pueden confundir la materia. Es muy probable que alguien navegue al http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ en el navegador y obtenga una respuesta en caché que contenga solo el área de contenido, haciendo que su sitio sea inútil.

La forma correcta de elaborar una respuesta que depende de un encabezado de solicitud es para incluirlo en la cabecera Vary respuesta, por ejemplo:

Vary: X-Requested-With 

Sin embargo, la implementación de la cabecera Vary de IE se divide básicamente, por lo al hacerlo, romperá por completo el almacenamiento en caché. En cambio, el mejor enfoque es sólo para tener una URL diferente para la página completa y las versiones contenido de solo-para-AJAX, por ejemplo:

http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/?xmlhttp=on 

En cualquier caso, no lo haga en este tipo de páginas navegación sin proporcionar explícitamente URL navegables, marcables, aptas para SEO (basadas en history.pushState donde estén disponibles y #! hash-links).Lo está haciendo mejor que la mayoría de estos sitios de pseudonavegación basados ​​en load() al proporcionar URL alternativas que no son JS, pero todavía está poniendo un montón de esfuerzo en un esquema de navegación no estándar que es peor que el simple uso de enlaces de página normal . No vale la pena sabotear la usabilidad de su sitio solo para un efecto de fundido de entrada y salida.