Databases
StackOverflow2013
Postsdbo
POWhy doesn't Firefox show the correct default select option?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy doesn't Firefox show the correct default select option?
    text
    copied!<p>I'm making a web app to manage product SKUS. One part of that is to associate SKUs with product names. On each row of a table, I list a SKU and display a <code>&lt;select&gt;</code> box with product names. The product that's currently associated with that SKU in the database is given an attribute like <code>selected="selected"</code>. This can be changed and updated via AJAX.</p> <p>There are a <strong>lot</strong> of product <code>&lt;option&gt;</code>s - 103 to be exact - and this list is repeated in the <code>&lt;select&gt;</code> on each row.</p> <p>From another input on the page, I am using jQuery AJAX requests to add new SKU/product associations, and to make it clear that they're added instantly, I insert them into the <strong>top</strong> of the table with a little highlight effect. As the number of SKUs increases past 10 or so, if I refresh the page (which loads everything back out of the database ordered by product name), Firefox starts to show some wrong options as selected by default. It is not consistent about which incorrect option it shows, but it seems to be mixing up the options that existed before the page reload.</p> <p>If I inspect the <code>&lt;select&gt;</code> using Firebug, the <code>select="selected"</code> is on the correct <code>&lt;option&gt;</code> tag. Refreshing the page (or leaving and typing this page's URL back in to return) does not make it show up correctly, but <strong>hard refreshing (Ctrl+F5) does</strong>.</p> <p>Both Chrome and IE7 display this correctly in the first place.</p> <p>My theory is that this is a result of a faulty cache strategy by Firefox. Does that sound right? Is there any way I can say in my code "if this page is refreshed, make it a hard refresh - reload everything from scratch?"</p> <h2>Update</h2> <p>To solve this problem, I changed strategies.</p> <ul> <li>Previously, I put a <code>&lt;select&gt;</code> with a long list of <code>&lt;option&gt;</code>s on each table row, with the current value set as default</li> <li>Now, I put the current value in a <code>&lt;span&gt;</code>. If the user clicks a "change" button, I replace the <code>&lt;span&gt;</code> with a <code>&lt;select&gt;</code>, and the "change" button becomes a "confirm" button. If they change options and click confirm, AJAX updates the database, the and the <code>&lt;select&gt;</code> goes back to being a <code>&lt;span&gt;</code>, this time with the new value.</li> </ul> <p>This has two benefits:</p> <ul> <li>It fixes the bug described above</li> <li>It requires <strong>far</strong> fewer DOM elements on the page (all those redundant <code>&lt;option&gt;</code>s)</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload