Préserver l'état de la page Ajax avec le hash d'URL

Question

Il y a une page sur mon site avec deux jeux d'onglets, le lien de chaque onglet est ajax-driven mais a un href approprié au cas où javascript n'est pas activé. Je suis sur le point d'implémenter une solution ajax 'back-button' en utilisant un plugin tel que jQuery Address. Mon problème/confusion avec cette solution est que le contenu par défaut d'une page est encore chargé avant que le javascript ait une chance d'analyser le hachage et de charger le contenu correct. Si je cache initialement le contenu, les utilisateurs non-javascript ne verront jamais rien. Si je ne cache pas initialement le contenu, l'utilisateur verra la mauvaise page pendant un moment avant d'être mise à jour (en plus de la surcharge supplémentaire consistant à charger d'abord le mauvais onglet puis l'onglet correct). Quelles sont les approches les meilleures/les plus courantes pour faire face à cela?

Merci, Brian

Answer 1

Si vous utilisez des hachages, vous aurez toujours le mauvais contenu en premier. Vous devez utiliser une solution côté serveur avec l'API d'historique HTML5 pour éviter cela. Read more

Vous pouvez utiliser: https://github.com/browserstate/ajaxify

Et avoir les onglets sur le côté rendent serveur avec quelque chose comme if ($_GET['tab'] === '2') // render 2

Answer 2

Je pense que cela est une bonne question. Avez-vous essayé d'utiliser la balise <noscript> pour inclure css qui affiche le contenu caché initialement pour les utilisateurs JS. Quelque chose comme ceci:

<style type="text/css"> 
    #area-1, #area-2 { display: none; } 
</style> 

<noscript> 
    <style type="text/css"> 
    #area-1, #area-2 { display: block; } 
    </style> 
</noscript> 

Espérons que cela aide!