webentwicklung-frage-antwort-db.com.de

Warum zeigt Firefox nicht die richtige Standardauswahloption an?

Ich erstelle eine Web-App, um das Produkt SKUS zu verwalten. Ein Teil davon besteht darin, SKUs mit Produktnamen zu verknüpfen. In jeder Zeile einer Tabelle liste ich eine SKU auf und zeige ein <select> Box mit Produktnamen. Das Produkt, das derzeit mit dieser SKU in der Datenbank verknüpft ist, erhält ein Attribut wie selected="selected". Dies kann über AJAX geändert und aktualisiert werden.

Es gibt eine Menge von Produkt <option>s - 103 um genau zu sein - und diese Liste wird im <select> in jeder Zeile.

Anhand einer anderen Eingabe auf der Seite verwende ich jQuery AJAX) -Anforderungen, um neue SKU-/Produktzuordnungen hinzuzufügen, und um zu verdeutlichen, dass sie sofort hinzugefügt werden, füge ich sie in ein. -top der Tabelle mit einem kleinen Highlight-Effekt. Wenn die Anzahl der SKUs nach etwa 10 steigt und ich die Seite aktualisiere (wodurch alles aus der nach Produktnamen sortierten Datenbank zurückgeladen wird), werden in Firefox einige falsche Optionen angezeigt, die standardmäßig ausgewählt sind. Es ist nicht konsistent, welche falsche Option angezeigt wird, aber es scheint, dass die Optionen, die vor dem erneuten Laden der Seite vorhanden waren, verwechselt werden.

Wenn ich das <select> mit Firebug, dem select="selected" ist auf dem richtigen <option> Etikett. Wenn Sie die Seite aktualisieren (oder die URL dieser Seite verlassen und erneut eingeben, um sie zurückzugeben), wird sie nicht korrekt angezeigt, aber Harte Aktualisierung (Strg + F5).

Sowohl Chrome als auch IE7 zeigen dies an erster Stelle korrekt an.

Meine Theorie ist, dass dies ein Ergebnis einer fehlerhaften Cache-Strategie von Firefox ist. Klingt das richtig? Kann ich in meinem Code auf irgendeine Weise sagen, dass "wenn diese Seite aktualisiert wird, eine harte Aktualisierung erforderlich ist - alles von Grund auf neu laden"?

Aktualisieren

Um dieses Problem zu lösen, habe ich die Strategien geändert.

  • Zuvor habe ich ein <select> mit einer langen Liste von <option>s in jeder Tabellenzeile, wobei der aktuelle Wert als Standard festgelegt ist
  • Nun setze ich den aktuellen Wert in ein <span>. Wenn der Benutzer auf "Ändern" klickt, ersetze ich das <span> mit einer <select>, und die Schaltfläche "Ändern" wird zu einer Schaltfläche "Bestätigen". Wenn sie die Optionen ändern und auf Bestätigen klicken, aktualisiert AJAX die Datenbank, das und das <select> wird wieder ein <span>, diesmal mit dem neuen Wert.

Dies hat zwei Vorteile:

  • Es behebt den oben beschriebenen Fehler
  • Es erfordert weit weniger DOM-Elemente auf der Seite (alle diese redundanten <option>s)
firefoxselectcaching
67
Nathan Long

Firefox behält Ihre ausgewählten Formularelemente bei, wenn Sie aktualisieren. Es ist beabsichtigt. Strg + F5 ist eine "harte" Aktualisierung, die dieses Verhalten deaktiviert.

-

Oder Befehlstaste + Umschalttaste + R, wenn Sie einen Mac verwenden

45
Ted Mielczarek

Ich hatte ein ähnliches Problem, aber nach dem Hinzufügen von autocomplete="off" HTML-Attribut für jedes ausgewählte Tag, mit dem es funktioniert hat. [Ich habe Firefox 8 benutzt]

101
BananaDeveloper

Eine einfache Möglichkeit, zu verhindern, dass Firefox die zuletzt ausgewählte Option zwischenspeichert, besteht darin, alle Optionselemente beim Entladen der Seite zu entfernen. Zum Beispiel (unter der Annahme von jQuery):

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

Ich hatte das gleiche Problem. Ich habe versucht, den Wert der Auswahl abhängig von der ausgewählten Option zu ändern = "ausgewählt", aber Firefox funktionierte nicht. Standardmäßig wird immer die erste Option ausgewählt.

Chrome, Safari usw. funktionierten, als ich das tat:

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

... aber das hat in FF nicht funktioniert.

Also habe ich versucht:

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

und es funktioniert.

jQuery v1.9.1

11
clint_milner

Ich schaffe es, indem ich den Autocomplete = "off" auf den versteckten Eingang setze.

6
Alex

Das ist zwar eine alte Frage, aber die unten stehende Lösung kann jemandem helfen

In Firefox habe ich festgestellt, dass das Attribut "Ausgewählt" nur funktioniert, wenn Sie das Auswahl in ein Formular einfügen, wobei das Formular ein Namensattribut hat.

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

Denken Sie noch einmal daran:

  1. form muss das Attribut "name" und
  2. "select" muss sich im Formular befinden.
5
Rakesh Soni

Zu Ihrer Information: Um zu verhindern, dass Firefox nach dem Neuladen der Seite die zuvor ausgewählte Option wiederherstellt, können Sie das gesamte <form> mit dem <select> Optionen innerhalb eines <iframe>.

Wenn Auswahlfelder in <iframe> Wenn Sie die Containerseite neu laden, verhält sich Firefox wie ALLE anderen Browser, indem Sie einfach die ausgewählten Optionen zurücksetzen.

0
Marco Demaio

Firebug verfügt für genau dieses Szenario über eine Cache-Deaktivierungsfunktion.

Die tiefere langfristige Lösung besteht darin, herauszufinden, wie serverseitig die Header ohne Cache festgelegt werden. Welchen Webserver verwenden Sie?

0
lod3n

Jedes Mal, wenn ich in Firefox seltsame Fehler bei der Auswahl von Optionen hatte, hatte ich mehrere Optionen als ausgewählt markiert. Sind Sie sicher, dass nur einer als solcher gekennzeichnet ist? Scheint, als könntest du ziemlich leicht aus dem Ruder laufen, wenn du das mit AJAX änderst.

0
Morinar

Dank @BananaDeveloper ( https://stackoverflow.com/a/8258154/2182349 ) ist dies meine Lösung, um dieses Problem auf einer einzelnen Seite in einer Anwendung zu lösen

Ich wollte den Standard-/Open Source-Anwendungscode nicht anpassen

<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>

Apache-Dokumente für mod_substitutehttps://httpd.Apache.org/docs/2.4/mod/mod_substitute.html

Vielen Dank an: https://serverfault.com/questions/843905/Apache-mod-substitute-works-in-curl-but-not-on-browser für das SetOutputFilter

0
user2182349