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

Question

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

the scripts that have min are basically the same scripts but minified (mostly written without spaces), so you don't have to include them again and that will make your statement making sure i'm not sourcing anything twice (jQuery.js for example) .. not really true — Spokey
– Spokey, Commented May 28, 2013 at 19:23
you are right ,since i'm new to JS,jQuery ,i thought i had to source both. anyhow ,i removed all *min.js sourcing , problem still there. but thanks for explaining the "min" files to me. --> code updated in original question !! — sivan
– sivan, Commented May 28, 2013 at 19:36
Where is the html element "positionsSummeryTable" in your html? Datatables must be ran on a valid html table in order to work — Jay Rizzi
– Jay Rizzi, Commented May 29, 2013 at 2:28
sure ,if you look at the page2.html code mthe first code part i added ,at the bottom you'll see the table. — sivan
– sivan, Commented May 29, 2013 at 8:15

amp · Accepted Answer · 2013-10-18 10:46:20Z

2

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

answered Oct 18, 2013 at 10:46

amp

816 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related