Restore object classes on back button in Firefox

Question

1. I have a form. Initially an input element has the class "unfilled". As the form is filled out I dynamically remove the class.

2. The form is submitted and there is a redirect to another page.

3. I click the "back" button and come back to the original form, but the element is missing the "unfilled" class.

This not a problem in IE8. I tried adding this jQuery call, but it is not executed when the page is reached via back button:

$('#my_input').hasClass('unfilled')

Thanks!

edit: Posted the wrong line of code above, sorry. Should be:

$(document).ready(function() {
    $('#my_input').addClass('unfilled')

Answer 1

Firefox maintains something called a bfcache (read more here), that basically caches the entire state of the page in memory and restores it when you go back. onload scripts are not executed again and elements stay in the same state they were in before. You can disable this behaviour by adding a dummy onunload handler to your page.

Answer 2

Firefox preserves state when you go back, which is very handy on DHTML-heavy pages (if you generated a dialog for instance, that dialog will still be there when you go back). You'll just have to account for this in your code; for instance, you could try adding an onready handler that adds an "unfilled" class to all input elements, eg.

$(function() {
    $("INPUT").addClass("unfilled");
 });