5

I have a page with several check boxes that needs to represent the state in a database. The check boxes are AJAX driven so when one is checked, a request is sent to update state in the database. If their view was stale the view for affected/related check boxes are updated, and user notified, and must try again. When I refresh I'd like the check boxes to represent what is actually returned in HTML generated from the data in the database, not some arbitrary previous user interactions with the input elements.

How do I make it so Firefox doesn't update these check boxes I've interacted with so they are identical to the state in the newly received HTML?

The problem is confusing because:

  1. When I refresh a page in Firefox and the checked attribute for the check box is updated in the newly received HTML, Firefox will update the view, as I would expect it to.

  2. However, if I interact with the check box, then refresh, THAT check box is not updated per the newly received HTML.

ie. It doesn't matter if checked="checked" or the checked attribute is non-existant, Firerfox keeps it that way unless I do a shift-refresh.

I've even added window.onunload = function(){}; because I thought it might be due to the bfcache, but it is not.

Tried with the following headers and it still restored the state.

HTTP/1.1 200 OK
Date: Thu, 15 Mar 2012 21:19:02 GMT
Server: Apache/2.2.20 (Ubuntu)
Expires: 0
Pragma: no-cache
Cache-Control: no-cache, no-store, must-revalidate
Vary: Accept-Encoding
Content-Encoding: gzip
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html;charset=ISO-8859-1

Tried looping over the elements, and despite the checked attribute not existing in the source html, JavaScript considered the checked attribute to be "checked.", so there is no way to restore the value from the received source, after Firefox restores the value from previously entered input.

The converse is also true... the source says checked="checked" and the onload JavaScript considers checked undefined.

Source for alerting on the state of the first checkbox.

window.onload = function() {   
    $('input[type="checkbox"]').each(function() {
        alert($(this).attr('checked'));
        return false
    });
}
Improve this question
9
  • This is intentional behavior on Firefox's part. In general, when you interact with a form and then refresh the page, it restores everything you've entered. (It does the same thing when it restores a session. This is especially nice when you enter several paragraphs of text into a textarea, and then have to restart your computer for whatever reason.) But, uh . . . what exactly is your question?
    – ruakh
    Commented Mar 15, 2012 at 19:55
  • @ruakh haha, I just updated after I reread my question, and realized there was no actual question :)
    – Derek Litz
    Commented Mar 15, 2012 at 19:56
  • You need to send headers from your server instructing the browser not to cache pages.
    – aziz punjani
    Commented Mar 15, 2012 at 19:58
  • @Interstellar_Coder I don't believe the page is being cached. The HTML on the page is refreshed (to what it should be) and the server is giving a 200 response. I believe ruakh is on the right track, as it seems Firefox is restoring the entered information. But, if you know which headers, I'll surely give it a try.
    – Derek Litz
    Commented Mar 15, 2012 at 20:01
  • What if you were to use JS to unset everything back to default information. I'm not trying to promote this idea, but that should force any stored information by FF to be reset back to the default.
    – mikevoermans
    Commented Mar 15, 2012 at 20:09

1 Answer 1

Reset to default
3

document.formname.reset() worked, which seems to restore from whatever the HTML was originally. It's the only method I tried that works...

Thanks to Dennis for posting this answer for a similar question. Firefox: How to reload form *without* caching user-input?

The only problem with this solution is I do not need a form, and am not using a form, or submitting a form, etc. I am using these check boxes to create a user interface which seems to be a perfectly valid use case, but in order for this to work, I needed to associate all my inputs with a form.

Improve this answer
2
  • Strictly speaking <input> elements are not valid outside of a <form> element, so it makes sense that you'd have to associate them with a form for you to get expected behaviour ;)
    – Niet the Dark Absol
    Commented Mar 15, 2012 at 23:35
  • 1
    @Kolink "The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls." - Is that statement no longer valid?
    – Derek Litz
    Commented Mar 15, 2012 at 23:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.