CODEWITHSUNDEEP
jqueryjquery-pluginsdatatables
sivan
sivan

Reputation: 233

Uncaught TypeError: Object [object Object] has no method 'dataTable'

i spent two days looking for an answer ,and although i encountered lots of answers ,none helped me. i'm building a site with tabs and in one of the tabs i load an html called page2.html for now.

page2.html code:

<!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>

my index.html code : 

<!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>

i also have a page2.js with document.ready function which contains this dataTables code:

   $('#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"}

            ]


        }


    );

i'm using wampserver to run locally.

my question : running in chrome and firefox gives the same error :

Uncaught TypeError: Object [object Object] has no method 'dataTable'

i saw some answers talking about: 1. making sure i src jQuery.js before dataTables.js 2. making sure i actually src dataTables.js 3. making sure i'm not sourcing anything twice (jQuery.js for example) ...

i think i checked all these cases , my code seems pretty simple and yet i cant find the reason for this error.

does anybody have an idea on how to solve this ?

Thanks in advance Sivan

Upvotes: 2

Views: 3139

Answers (1)

amp
amp

Reputation: 81

Try moving the dataTables plugin script call fromPage2.html to Index.html

Upvotes: 2

Related Questions