Search code examples
javascriptjqueryjquery-uijquery-pluginsjqtree

jQuery treeTable Plugin throwing error "TypeError: $(...).treetable is not a function"

Scenario: Consider the following in code html file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery treetable</title>
        <link rel="stylesheet" href="assets/css/screen.css" media="screen" />
        <link rel="stylesheet" href="assets/css/jquery.treetable.css" />
        <link rel="stylesheet" href="assets/css/jquery.treetable.theme.default.css" />
    </head>
    <body>
        <div id="main">
            <table id="tree">
                <tr id="node-1">
                    <td>Parent</td>
                </tr>
                <tr id="node-2" class="child-of-node-1">
                    <td>Child</td>
                </tr>
                <tr id="node-3" class="child-of-node-2">
                    <td>Child</td>
                </tr>
            </table>
        </div>
        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/jquery-ui.js"></script>
        <script src="assets/js/jquery.treetable.js"></script>
        <script>
            $("#tree").treetable({ expandable: true }); 
        </script>
    </body>
</html>

All the resources/dependencies (js, css and image files) are loads perfectly with 200 HTTP Status (later on 304).

Issue: Is error in Firebug. Below is the error from firebug console:

TypeError: $(...).treetable is not a function
[Break On This Error] 
$("#tree").treetable({ expandable: true });

Links:

  1. Sources for plugin
  2. Documentation and Demo/Examples

Question: Does anyone got this issue & knows any solution? Then please put some light on this it will be of great help.

Update 1: Even tried with following code:

<script>
    $(document).ready(function () {
        $("#tree").treetable({ expandable: true });
    });
</script>

Update 2: Based on all the answers.

I tried with following code:

<script>
    $(document).ready(function () {
        $("#tree").treeTable({ expandable: true });
    });
</script>

But no luck :-(

And is the source example its just 't' not capital 'T'.(Link)

Solution

  • Old reference provided in the documentation & installation steps (link > 2.2)

    2.2 step says that "Add src/javascripts/jquery.treeTable.js"

    But it does not work and the working sample referring to different jquery.treeTable.js file on the server. Its correct in the GitHub scource code

    Other answers referred to code treetable() has to be like treeTable(). But it didn't work. :-(

    Issue was : 2.2 step says that "Add src/javascripts/jquery.treeTable.js"

    Solution: Get the jquery.treeTable.js file from GitHub

    Issue Raised on GitHub