Comment actualiser uniquement une partie de la page lorsque vous appuyez sur F5 ou sur le bouton d’actualisation

Je conçois une application Web qui propose un menu partagé pour toutes les pages. Pour cette raison, j’ai décidé de charger le contenu lié par les boutons de menu à l’intérieur d’un div, en utilisant jquery.

Donc, j’ai ceci:

$("#AddNewProductBtn").click(function() { $("#content").load("addproduct.html"); });

Je veux garder une trace de la page affichée à l’intérieur du “#content” div. Si les utilisateurs actualisent la page, je souhaite charger la même page dans “#content”. Existe-t-il un moyen de le faire ou existe-t-il une solution de contournement?

J’ai vu des sites Web qui utilisent un iframe pour charger les pages, mais lorsqu’un utilisateur clique sur un bouton du menu, l’URL est également modifiée. Je n’ai trouvé aucune information sur la façon de le faire.

Merci

Vous devez append un paramètre à la partie de hachage de l’URL (après #), par exemple domain.com/index.php#addproduct.

Ensuite, sur document.ready, vérifiez la valeur après # et chargez le contenu correspondant.

Certains plugins tels que l’ historique jQuery utilisent cette technique.

En outre, vous pouvez exploiter le stockage local et mettre en cache des parties du code sur le navigateur afin de ne pas charger le contenu avec un appel AJAX une deuxième fois.

Voici une solution pour le F5 et CTRL + R

 $(document).keydown(function(e) { if (e.which == 116 || e.keyCode == 82 && e.ctrlKey) { //116 = F5 $("#content").load("addproduct.html"); return false; } });

Au lieu d’utiliser un hachage, vous pouvez également utiliser l’API d’historique HTML5 ( pushState , replaceState et popstate ). Fondamentalement, c’est un hachage avec quelques améliorations (par exemple, indexable par les moteurs de recherche).

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://www.w3.org/TR/html5/history.html