I have a webpage with 4 tables. Each row contains two text boxes with numeric values. The textboxes are populated with data from the server. But,something strange happens.
If I add data to a row, say row 1. Then Refresh the page…two values are moved down 6 rows. I looked at the data created on the server, it definitly does not come from the server. Also, the HTML doesn’t show this data either.
For example,
<input id="itemTypeRow6" class="ItemType" type="text" data-uniqueid="Some ID" value="">
value=””, but looking at the webpage, the text displays 2. (The value I input before I hit refresh).
I do have some jQuery running, but as far as I can remember nothing happens on this page on document.ready except various event binding.
How can this happen? (Firefox [v4.0.1] only, does not occur in IE7)
This only happens when I do an F5 refresh. If I go up to the address bar and hit <Enter> it does not happen.
I use <!DOCTYPE html> header
Firefox tries to preserve form values across regular (not hard) reload. In fact, all browsers do this.
The particular algorithm Firefox uses for this doesn’t work very well in the face of DOM changes; it uses the positions of nodes in the DOM when the page is unloading to save the state, but the positions when the page is loading to restore it. So to the extent that those do not match up, you’ll get weird behavior….