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 a an<select> Box mit Produktnamen. Das Produkt, das derzeit mit dieser SKU in der Datenbank verknüpft ist, erhält ein Attribut wieselected="selected". Dies kann über AJAX geändert und aktualisiert werden.

Es gibt aMenge des Produktes<option>s - 103 um genau zu sein - und diese Liste wird in der wiederholt<select> in jeder Reihe.

Anhand einer anderen Eingabe auf der Seite verwende ich jQuery AJAX-Anforderungen, um neue SKUs / Produktzuordnungen hinzuzufügen. Um zu verdeutlichen, dass sie sofort hinzugefügt werden, füge ich sie in die einoben 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 inspiziere<select> mit Firebug, demselect="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 angezeigtHard Refreshing (Strg + F5) funktioniert.

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 eine<select> mit einer langen Liste von<option>s in jeder Tabellenzeile, wobei der aktuelle Wert als Standard festgelegt istJetzt gebe ich den aktuellen Wert in ein<span>. Wenn der Benutzer auf eine Schaltfläche "Ändern" klickt, ersetze ich die<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> geht zurück zu einem<span>Diesmal mit dem neuen Wert.

Dies hat zwei Vorteile:

Es behebt den oben beschriebenen FehlerEs benötigtweit weniger DOM-Elemente auf der Seite (alle diese überflüssigen<option>s)