I’m having a strange issue with my Javascript in Firefox 3.0.x. In Firefox 3.0.12, the page constantly reloads as soon as the list body is loaded. Neither Firefox 3.5, Safari 4 nor Chrome 5 (all on Mac) experience this issue.
EDIT: I’ve created an isolated example rather than pulling this from my existing code.
The issue was related to a bug that caused the page to reload when setting location.hash to an empty string in FF 3.0.
test.js
function welcomeIndexOnLoad() {
$("#options a").live('click', function () {
optionClicked($(this), "get_list_body.html");
return false;
});
$(document).ready(function() {
optionClicked(null, "get_list_body.html");
});
}
function optionClicked(sender, URL) {
queryString = "";
if (sender != null) {
queryString = $(sender).attr("rel");
}
$("#list_body").load(URL + "?" + queryString, function(resp, status, AJAXReq) {
console.log(resp);
console.log("" + status);
location.hash = queryString;
});
}
test.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
<script>
welcomeIndexOnLoad();
</script>
</head>
<body>
<div id="container">
Outside of list body.
<div id="list_body">
</div>
</div>
</body>
</html>
get_list_body.html
<h3>
<div id="options">
<a href="#" rel="change_list">Change List</a>
</div>
<ul>
<li>li</li>
</ul>
jQuery line 5252 (an xhr.send() call) shows up in the console as soon as the page reloads:
xhr.send( type === "POST" || type === "PUT" || type === "DELETE" ? s.data : null );
After much more searching, I came across this blog post, which mentions that setting the location hash to an empty string in Firefox 3.0 causes the page to refresh.
Changing my default queryString to “#” rather than an empty string fixes the problem.