i can't seem to get jquery's .load() function to work. must be something simple i'm missing...basically just trying to load a fragment of more.html into index.html.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.5.js" />
<title>Test</title>
<script type="text/javascript">
$(document).ready(function () {
alert("jquery script executing...");
$('#foo').load('more.html #bar', loadComplete);
});
function loadComplete (response, status, xhr) {
alert("load complete.");
}
</script>
</head>
<body>
<div id="foo">
foo foo foo
</div>
</body>
</html>
more.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>More</title>
</head>
<body>
<div id="bar">
bar bar bar
</div>
</body>
i see both the alerts -- the script is being executed, and the callback is being called (i.e. the load is completing). however, the contents of do not change. i've tried on safari, chrome, and firefox (all on OSX). there must be something obvious i'm missing...?
