web-dev-qa-db-fra.com

Pourquoi Firefox n'affiche-t-il pas l'option de sélection par défaut correcte?

Je crée une application Web pour gérer le produit SKUS. Une partie de cela consiste à associer des SKU aux noms de produits. Sur chaque ligne d'un tableau, j'énumère une référence et affiche une boîte <select> Avec les noms des produits. Le produit actuellement associé à cette référence dans la base de données reçoit un attribut comme selected="selected". Cela peut être modifié et mis à jour via AJAX.

Il y a lot de produit <option> S - 103 pour être exact - et cette liste est répétée dans le <select> Sur chaque ligne.

À partir d'une autre entrée sur la page, j'utilise jQuery AJAX demandes pour ajouter de nouvelles associations SKU/produit, et pour qu'il soit clair qu'elles sont ajoutées instantanément, je les insère dans le en haut du tableau avec un petit effet de surbrillance. Comme le nombre de SKU augmente au-delà de 10 environ, si je rafraîchis la page (qui charge tout en arrière de la base de données commandée par nom de produit), Firefox commence à afficher certains options incorrectes sélectionnées par défaut. L'option incorrecte n'est pas cohérente, mais il semble mélanger les options qui existaient avant le rechargement de la page.

Si j'inspecte le <select> À l'aide de Firebug, le select="selected" Est sur la bonne balise <option>. L'actualisation de la page (ou le fait de quitter et de taper l'URL de cette page pour revenir) ne la fait pas apparaître correctement, mais l'actualisation matérielle (Ctrl + F5) le fait.

Les deux Chrome et IE7 affichent cela correctement en premier lieu.

Ma théorie est que cela est le résultat d'une stratégie de cache défectueuse de Firefox. Est-ce que ça sonne bien? Existe-t-il un moyen de dire dans mon code "si cette page est actualisée, faites-en une actualisation matérielle - tout recharger à partir de zéro?"

Mise à jour

Pour résoudre ce problème, j'ai changé de stratégie.

  • Auparavant, je mettais un <select> Avec une longue liste de <option> S sur chaque ligne du tableau, avec la valeur actuelle définie par défaut
  • Maintenant, je mets la valeur actuelle dans un <span>. Si l'utilisateur clique sur un bouton "modifier", je remplace le <span> Par un <select>, Et le bouton "modifier" devient un bouton "confirmer". S'ils modifient les options et cliquent sur confirmer, AJAX met à jour la base de données, le et le <select> Redevient un <span>, Cette fois avec la nouvelle valeur.

Cela présente deux avantages:

  • Il corrige le bug décrit ci-dessus
  • Il nécessite loin moins d'éléments DOM sur la page (tous ces <option> S redondants)
firefoxselectcaching
67
Nathan Long

Firefox conserve les éléments de formulaire sélectionnés lors de l'actualisation. C'est intentionnel. Ctrl + F5 est un rafraîchissement "dur", qui désactive ce comportement.

-

Ou Commande + Maj + R si vous êtes sur un Mac

45
Ted Mielczarek

J'ai eu un problème similaire, mais après avoir ajouté autocomplete="off" Attribut HTML à chaque balise de sélection utilisée. [J'utilisais Firefox 8]

101
BananaDeveloper

Un moyen simple d'empêcher Firefox de mettre en cache la dernière option sélectionnée consiste à supprimer tous les éléments d'option lors du déchargement de la page. Par exemple (en supposant que jQuery):

$(window).unload(function() {
  $('select option').remove();
});
14
ozu

J'ai eu ce même problème. J'essayais de changer la valeur de la sélection en fonction de l'option choisie = "sélectionné", mais Firefox ne fonctionnait pas. Il serait toujours par défaut à la première option.

Chrome, Safari, etc. ont fonctionné lorsque j'ai fait cela:

$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );

... mais cela ne fonctionnait pas dans FF.

J'ai donc essayé:

$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

et il fonctionne.

jQuery v1.9.1

11
clint_milner

Je l'ai fait fonctionner en mettant l'autocomplete = "off" sur l'entrée cachée.

6
Alex

Bien que ce soit une vieille question, mais la solution ci-dessous peut aider quelqu'un

Dans Firefox, j'ai remarqué que l'attribut "sélectionné" ne fonctionnera que si vous placez le sélectionner à l'intérieur d'un formulaire, où le le formulaire a un attribut de nom.

<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>

Rappelez-vous encore:

  1. le formulaire doit avoir l'attribut "nom" et
  2. "sélectionner" doit être à l'intérieur du formulaire.
5
Rakesh Soni

Pour info: afin d'empêcher Firefox de restaurer l'option précédemment sélectionnée après le rechargement de la page, vous pouvez placer l'intégralité de <form> contenant le <select> options dans un <iframe>.

Lorsque les cases de sélection sont dans <iframe> et vous rechargez la page du conteneur, Firefox se comporte enfin comme TOUS les autres navigateurs, en réinitialisant simplement les options de sélection.

0
Marco Demaio

Firebug a une fonction de désactivation du cache pour exactement ce scénario.

La solution à long terme la plus approfondie consiste à déterminer comment définir les en-têtes sans cache côté serveur. Quel serveur Web utilisez-vous?

0
lod3n

Chaque fois que j'avais des bogues d'option de sélection étranges dans Firefox, c'était parce que j'avais plusieurs options marquées comme sélectionnées. Êtes-vous bien sûr qu'un seul est marqué comme tel? On dirait que vous pourriez sortir du wack assez facilement si vous changez cela avec AJAX.

0
Morinar

Merci à @BananaDeveloper ( https://stackoverflow.com/a/8258154/2182349 ) - c'est ma solution pour résoudre ce problème sur une seule page dans une application

Je ne voulais pas personnaliser le code d'application open-off/open source

<Files "page_that_does_not_work.php">
        SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE
        Substitute 's/<select/<select autocomplete="off"/n'
        Substitute 's/<form/<form novalidate/n'
</Files>

Documents Apache pour mod_substitutehttps://httpd.Apache.org/docs/2.4/mod/mod_substitute.html

Merci à: https://serverfault.com/questions/843905/Apache-mod-substitute-works-in-curl-but-not-on-browser pour le SetOutputFilter

0
user2182349