Why cannot I not get tab content to show pointing to jquery site? I based this code on the demo - http://jqueryui.com/demos/tabs/#ajax

Why cannot I not get tab content to show pointing to jquery site? I based this code on the demo - http://jqueryui.com/demos/tabs/#ajax

You will need to;
1) pull down/or find the css file that I am using for this to 'work' properly (didn't know the url to css on website)
2) pull down content1.html and create in a subfolder ajax relative to where the html file below is created.

Not sure why the content for the second tab is not showing, tab shows as blank.
If I post this into the browser I can see the content -  http://jqueryui.com/demos/tabs/ajax/content2.html.

If I create a local copy of the file (first tab is this way) it works.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<meta charset="UTF-8" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
},
success: function(data, textStatus, XMLHttpRequest, arg4, arg5) {
}
}
});
});
</script>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/content1.html">Tab Works If File Is Local</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content2.html">Tab fails, shows as blank, not error coded above</a></li>
</ul>
</div>
</body>
</html>