答えを探すのに 2 日間費やしましたが、たくさんの答えに出会いましたが、どれも役に立ちませんでした。タブ付きのサイトを構築しています。タブの 1 つで、今のところ page2.html という html を読み込みます。
page2.html コード:
<!DOCTYPE html>
<html>
<head>
<title>Positions</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<script src="sharedFunctions.js"></script>
<script src="positions/page2.js"></script>
</head>
<body>
<button id="togglePositionForm" onclick="toggleForm('position',this.id)"></button>
<div id="createNewPositionForm" hidden>
<form id="position" name="position" method="post" onsubmit="saveNewPosition()">
<p class="ui-widget-header" id="newPostionHeader" >General Info</p>
Position Name: <input type="text" id="positionName" name="positionName" value="test1"><br>
Entry Date: <input type="text" id="datepicker" name="datepicker" ><br>
Init Value: <input type="text" id="initValue" name="initValue" value=""><br>
Init Price: <input type="text" id="initPrice" name="initPrice" value=""><br>
Init Stop: <input type="text" id="initStop" name="initStop" value=""><br>
Current Price: <input type="text" id="currentPrice" name="currentPrice" value=""><br>
Current Value: <input type="text" id="currentValue" name="currentValue" value=""><br>
Gain/Loss(%): <input type="text" id="gainLossInPerc" name="gainLossInPerc" value="Automatic Calc"><br>
<input type="submit" value="submit">
</form>
</div>
</br>
</br>
</br>
</br>
<table id="positionsSummeryTable">
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
私のindex.htmlコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1>Trader's Friend</h1>
<!-- Tabs -->
<div id="tabs">
<ul>
<li><a href="positions/page2.html">Positions</a></li>
<li><a href="portfolios/page1.html">Portfolios</a></li>
<li><a href="#tabs-1">Market Overview</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</body>
</html>
私はまた、このdataTablesコードを含むdocument.ready関数を備えたpage2.jsを持っています:
$('#positionsSummeryTable').dataTable(
{
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ]
],
"aoColumns" : [
{"sTitle" : "Position#"},
{"sTitle" : "Name"},
{"sTitle" : "Entry Date"},
{"sTitle" : "Init Value"}
]
}
);
私は wampserver を使用してローカルで実行しています。
私の質問: chrome と firefox で実行すると同じエラーが発生します:
キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にメソッド 'dataTable' がありません
私はいくつかの答えを見ました: 1. dataTables.js の前に jQuery.js を src していることを確認する 2. dataTables.js を実際に src していることを確認する 3. 何かを 2 回ソースしていないことを確認する (たとえば jQuery.js) .. .
これらすべてのケースをチェックしたと思いますが、私のコードはかなり単純に見えますが、このエラーの理由を見つけることができません。
誰もこれを解決する方法について考えを持っていますか?
よろしくお願いします シヴァン