The following JavaScript codes cased an Ajax error. What would be wrong with this codes?
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tab_menu" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});
</script>
<style type="text/css">
#container {
width: 800px;
background-color: LightYellow;
margin: 0 auto;
}
#tab_menu {
font-weight: bold;
color: #666;
text-decoration: none;
margin-right: auto;
margin-left: auto;
width: 480px;
}
header {
background-image: url(image_sample/ph_header_nikko_kisuge.jpg);
height: 340px;
width: 798px;
border: 1px solid #333;
}
h1 {
font-family: "HGP行書体";
font-size: 36px;
font-weight: bold;
color: #FFF;
text-align: center;
width: 798px;
}
h2 {
font-size: 24px;
color: #060;
font-weight: bold;
margin-top: 5px;
}
h3 {
font-size: 16px;
line-height: 1.5;
color: #060;
}
article nav {
width:475px;
height:480px;
margin-left: auto;
margin-bottom: 0px;
margin-top: 0;
margin-right: auto;
}
section #page {
width: 450px;
height: 530px;
margin-right: auto;
margin-left: auto;
}
aside {
background-color: #DEF87A;
float: left;
height: 485px;
width: 277px;
border: 1px solid #999;
margin-top: 3px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
}
aside p {
font-size: 14px;
line-height: 1.3;
width: 270px;
}
article {
background-color: #FFF0DB;
float: right;
height: 495px;
width: 490px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
margin-top: 3px;
font-size: 13px;
line-height: 1.5;
}
#tab_menu ul li a {
font-weight: bold;
color: #063;
text-decoration: none;
font-size: 14px;
width: 100px;
display: inline;
}
#tab_menu ul li {
display: inline;
font-size: 14px;
color: #060;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>夏の思い出ー奥志賀高原</h1>
</header>
<aside>
<h2>奥志賀高原の夏合宿</h2>
<p>2011年7月31日より8月5日まで長野県山の内町の奥志賀高原で5泊6日の夏の合宿が行われました。</p>
<p> 宿舎となったペンション・シャレー・クリスチャニアは標高1,500mの静かな高原の中にあり、参加者一同は
日常生活の雑事から解放されて、昼間は大自然の中を歩き回り、
夜は無線LANの施設を利用して普段のボランティアズ・カフェではなし得ないInternet接続を要するホームページ関連
の実習を存分に行うことが出来ました。</p>
<p>昼間のハイキングは雑魚川の大滝へ行ったり、東館山に登ったり、ゴルフをしたりして大いに大自然を楽しみました。
ペンションで作ってくださったお握りの美味しかったことも思い出されます。</p>
<h3>このSample ProgramはjQueryのAjax通信を利用したTAB-MENUの練習用に考えれたものです。</h3>
</aside>
<article>
<nav id="tab_menu">
<ul >
<li><a href="#page">Study Time</a></li>
<li><a href="page_relax.html">Relax Time</a></li>
<li><a href="page_hiking.html">Hiking Time</a></li>
</ul>
<section>
<div id="page">
<p> <img src="image_sample/ph_study.jpg" alt="勉強の時間"> <br>
ペンション・シャレー・クリスチャニアの会議室での夜の勉強会風景。
参加者は長兵衛の家族と山仲間夫妻を含めて総勢6名でした。</p>
</div>
</section>
</nav>
</article>
<footer>
</footer>
</div>
</body>
</html>