Firefox n’actualise pas la balise select lors de l’actualisation de la page

J’ai rencontré un problème où j’ai une balise select que l’utilisateur utiliserait pour sélectionner une marque de téléphone et la page utilisant jquery afficherait alors simplement ces téléphones.

Grâce à l’aide des utilisateurs du débordement de stack, cela fonctionne désormais très bien sur tous les navigateurs, à l’exception de Firefox. Pour une raison quelconque, lorsque j’actualise la page, la balise select affiche la dernière option sélectionnée, mais la page affiche tous les téléphones disponibles comme prévu. Quelqu’un a-t-il des suggestions ou des conseils sur l’utilisation de Firefox pour actualiser le tag sélectionné? Je ne peux pas le montrer sur js.fiddle car cela ne se produit pas là-bas. Voici un lien:

http://davidarabis.com/test/test.html

Et voici le code:

 All Motorola HTC LG Samsung Kyocera    Motorola Triumph
 
  HTC WILDFIRE S
 
  LG Optimus Slider
 LG Optimus V
 LG Rumor Touch
 LG Rumor 2
 LG 101
 
  Samsung Intercept
 Samsung Restore
 Samsung M575

Le jquery:

 $(document).ready(function() { $('.manufacturers').change(function() { var selected = $(this).find(':selected'); $('ul.manulist').hide(); if ($(this).val() == 'all') { $('.scroll-content ul').show(); } else { $('.' + selected.val()).show(); $('.optionvalue').html(selected.html()).attr( 'class', 'optionvalue ' + selected.val()); } }); });

Merci d’avance pour tout conseil ou aide.

FireFox mettra en cache les valeurs de formulaire (y compris la valeur sélectionnée d’une zone de select ) lorsque le mécanisme d’actualisation est activé normalement ( F5 ). Toutefois, si un utilisateur choisit d’effectuer une actualisation matérielle ( Ctrl+F5 ), ces valeurs ne seront pas extraites du cache et votre code fonctionnera comme prévu.

Comme les utilisateurs agissent de leur propre chef, vous devez fournir une solution pour couvrir les deux cas. Cela peut être fait en prenant plusieurs approches:

Gérez chaque rafraîchissement de page: ajoutez du code de réinitialisation pour définir l’état sélectionné par défaut dans l’ window.onbeforeunload événements window.onbeforeunload .
Ajoutez ce code au début du gestionnaire ready le DOM.
Utilisez les cookies, comme décrit dans ce message du blog de Ted Pavlic , pour détecter l’actualisation de la page et y donner suite (en y plaçant le même code).
Définissez des en-têtes sans cache sur le serveur, forçant ainsi l’extraction des ressources pertinentes.

Références

window.onbeforeunload sur le réseau de développeurs Mozilla
Une publication sur stackoverflow sur la mise en cache des valeurs de formulaire du FireFox
Un article de blog sur le long métrage de 2009
Encore un autre article de blog sur le long métrage datant de 2008

Remarque: Il a été suggéré sur le post lié au SO , ainsi que ici dans les commentaires, de désactiver simplement la autocomplete . Ce n’est cependant pas la meilleure solution pour deux raisons: a. Compatibilité: l’ autocomplete – autocomplete est un atsortingbut HTML5 , nous limitons donc notre implémentation de choix et b. Sémantique: Le but est de gérer le cas d’une actualisation de page. La autocomplete – autocomplete est destinée à contrôler la mise en cache de l’historique de session et à gérer les invites des contrôles de formulaire. Si cette implémentation devait changer dans le futur, cette solution serait brisée.

Je pense avoir une solution plus simple. Pourquoi ne pas remettre la sélection à l’index 0 lorsque le document est prêt? Cela pourrait ressembler à ceci:

 $('.manufacturers').prop('selectedIndex',0);

Donc, votre script pourrait ressembler à ceci:

 $(document).ready(function() { $('.manufacturers').prop('selectedIndex',0); $('.manufacturers').change(function() { var selected = $(this).find(':selected'); $('ul.manulist').hide(); if ($(this).val() == 'all') { $('.scroll-content ul').show(); } else { $('.' + selected.val()).show(); $('.optionvalue').html(selected.html()).attr( 'class', 'optionvalue ' + selected.val()); } }); });

Et après rechargement, la sélection reviendra à la première position.

Si votre balise select est dans un formulaire, vous pouvez simplement y append l’atsortingbut autocomplete="off" et il se comportera comme prévu.