When using HTML <select> tag, changed 'selected' value not displayed in Firefox

Question

Hello (this is a copy of my post on the Seaside mailing list; first try at stackoverflow), How do I get the rendered display of a drop-down select list to show an updated selection from another session, in Firefox? (I'm using 3.6.13)

This problem does not appear in Chrome, IE or Opera.

Here is the scenario: I have a domain object with an attribute displayed in a drop-down list. Some other session updates the attribute. I refresh my display, but the rendered selection does not change. Using Firebug, the generated html shows the updated selection. This may be basic HTML knowledge, but should the displayed value not update to show the changed 'selected' option? Or is the value intended to be set only on the initial page display and then only by a user action?

Example: I have a demo Seaside component with a class variable #testStateListSelection which is selected to 'one' in a Seaside session. If I change the value to 'three' in another Seaside session, the displayed value stays as 'one' in the original session after rendering again, even though the "selected" in the generated HTML shows "three".

renderSelectionListOn: html
    html form: [
        html select 
            list: #('one' 'two' 'three' 'four' 'five'); 
            selected: self class testStateListSelection; 
            callback: [:value | self class testStateListSelection: value].
        html break.
        html submitButton
            callback: [Transcript cr; show: self class testStateListSelection];
            with: 'Save']

...the displayed value shows 'one', even though the HTML is...

<select name="1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3" selected="selected">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>

How do I get the drop-down selected value to show 'three'?

BTW: all I know about HTML & browser behaviour I've learned from coding Seaside, so I may have a skewed perspective ;-)

Thanks for any help.

Answer 1

The problem is that, when you refresh your page, your browser is remembering which option was previously selected. This feature is designed to make it harder to lose your form data during long forms and is discussed a bit on the Mozillazine forums

Instead of refreshing the page. if you load the page "fresh" by going to the address bar and pressing return, you'll get the page loaded from the server again - with the updated select

Answer 2

Whenever the page is refreshed the accessor self class testStateListSelection is run.

In fact the code you provide works perfectly for me. Are you sure that the accessors work as expected?

testStateListSelection
   ^ testStateListSelection    " <-- forgetting the return is a common problem "

testStateListSelection: aString
   testStateListSelection := aString

Answer 3

Another cause of the problem might be that your browser tries to autocomplete the form for you based on your last submission. Make sure you have disabled this feature in the preferences of your web browser. You can also try to tell the form-tag with an unofficial attribute not to autocomplete:

html form noAutocomplete; with: [ ...

Answer 4

If using javascript to refresh the page...

window.location.reload();

...will NOT re-render the select elements. They will retain their dynamic values regardless of what the new source HTML says.

To force the select elements to re-render, use...

window.location.reload(true);