Problème jQuery .load() dans toutes les versions d'IE

Question

J'essaie de créer un modèle dynamique. J'ai des liens dans la barre latérale et je veux charger le contenu dynamiquement avec .load() dans jQuery.

J'ai le code jQuery suivant pour que:

// 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; 
}); 

Fondamentalement, il fonctionne très bien, sauf dans IEs.

Le problème se produit lorsque je clique sur le lien qui a d'abord été chargé sans AJAX. Vous pouvez voir un exemple here. Lorsque vous cliquez sur le "Profil/vision" dans la barre latérale, il va charger à nouveau le site entier dans le div #content. Cela n'arrive que dans les IE, dans TOUTES les versions. Dans d'autres navigateurs, cela fonctionne normalement.

Des idées quel peut être le problème?

Merci.

Answer 1

Je crois qu'il est un problème de mise en cache ..

Depuis l'URL est la même que la page affichée, IE utilise le cache (avec toute la page) et il insère dans le #content div ..

Essayez d'ajouter un horodatage à la demande .load()

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

Answer 2

Vous semblent compter sur:En-tête dans la demande AJAX pour décider si envoyer une page complète en réponse, ou seulement le contenu principal.

Ne faites pas cela. Il n'est pas fiable à 100% que l'en-tête survivra à son voyage sur le serveur, et cela gâche la mise en cache si vous pouvez renvoyer des réponses différentes en fonction de cet en-tête. C'est ce qui se passe avec IE: vous essayez de charger http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ dans la zone de contenu, mais IE a déjà http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ dans son cache, car c'est aussi l'adresse de la page entière. Par conséquent IE utilise la page pleine mise en cache.

D'autres navigateurs avec d'autres stratégies de mise en cache et des proxys Web peuvent également confondre la matière. Il est tout aussi probable que quelqu'un se rendra au http://www.youweyoucoding.com/clients/formoda/allermolle/home/profil-vision/ dans le navigateur et obtiendra une réponse en cache contenant uniquement la zone de contenu, rendant votre site inutile.

La bonne façon de concevoir une réponse qui dépend d'un en-tête est à inclure, par exemple dans l'en-tête de réponse Vary,:

Vary: X-Requested-With 

Cependant, la mise en œuvre de IE de l'en-tête Vary est fondamentalement cassé, donc Ce faisant, vous casserez complètement la mise en cache. Au lieu de cela, la meilleure approche est juste d'avoir une autre URL de la page complète et les versions uniquement le contenu-pour-AJAX, par exemple:

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

Dans tous les cas, ne pas faire ce genre de pages en navigation sans explicitement fournir des URL navigables, signetables, SEO (basées sur history.pushState si disponible et sinon #! liens de hachage).Vous faites mieux que la plupart de ces sites de pseudo-navigation naïfs basés sur load() en fournissant des URL alternatives non-JS, mais vous mettez tout un tas d'efforts dans un système de navigation non standard qui est pire que d'utiliser simplement des liens de pages normales . Il ne vaut pas la peine de saboter la facilité d'utilisation de votre site juste pour un effet de fondu en fondu.