CODEWITHSUNDEEP
javascriptjqueryfancytree
Daqi Dong
Daqi Dong

Reputation: 23

Errors when I use a fancytree instance

I am a newbie of using fancytree. I have created a demo to display data in a table within a webpage. Now I hope to collect the data back after users updated them.

I was using so called tree methods as mentioned in the tutorial. There is an example that has two lines below:

var tree = $("#tree").fancytree("getTree");

alert("We have " + tree.count() + " nodes.");

I thought I can use the fancytree instance, the variable 'tree' in the above example, to access all nodes so that to collect the values they take. But when I put this two-lines example into my codes, I got errors.

For making it clear, I pasted the complete code below. Close to the end of the code, there are two comments marked by Place_1 and Place_2. When I put the two-lines example in each of these two places, I got errors, which are "Uncaught TypeError: undefined is not a function", or "Uncaught Error: cannot call methods on fancytree prior to initialization; attempted to call method 'getTree'" respectively.

I thought I must missed something. Any idea will be helpful. Thanks!

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

      <link type="text/css" rel="stylesheet" href="addtionals/jquery-ui.css" />
      <script src="addtionals/jquery.min.js" type="text/javascript"></script>
      <script src="addtionals/jquery-ui.min.js" type="text/javascript"></script>

      <link href="fancytree/src/skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
      <script src="fancytree/src/jquery.fancytree.js" type="text/javascript"></script>
      <script src="fancytree/src/jquery.fancytree.edit.js" type="text/javascript"></script>
      <script src="fancytree/src/jquery.fancytree.table.js" type="text/javascript"></script>

        <script type="text/javascript">

            var Rigid_Package_SOURCE = [
                {title: "Role-Based Statements", key: "1", folder: true, expanded: true, children: [
                  {title: "Text1", key: "2"},
                  {title: "Text2", key: "3"}
                 ]}
              ];

            $(function(){

              $("#RB_Statements_tree").fancytree({
                source: Rigid_Package_SOURCE,

                extensions: ["edit", "table"],

                edit: {
                    triggerCancel: ["esc"],
                  triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
                  beforeEdit: function(event, data){

                    if (data.node.isFolder() ) {
                        var title = data.node.title;
                        data.node.editEnd();
                        data.node.setTitle(title);
                        return false;
                    }        
                  },

                  beforeClose: function(event, data){
                    if (data.node.isFolder()) {
                    }else{
                      if (data.input.val() == ""){
                            data.node.setTitle("");
                        }
                    }
                  }
                },
                table: {
                  indentation: 20,
                  nodeColumnIdx: 1
                },

                renderColumns: function(event, data) {
                  var node = data.node,

                  $tdList = $(node.tr).find(">td"),

                  $select = $("<select />");

                  if( node.isFolder() ) {
                  }else{
                    $("<option > Tutor </option>").appendTo($select);
                      $("<option selected > Student </option>").appendTo($select);
                      $("<option > Teacher </option>").appendTo($select);
                      $tdList.eq(0).html($select);
                  }
                }
              });
            });

        </script>
    </head>

    <body>

        <script type="text/javascript">
        //Place_1: Uncaught TypeError: undefined is not a function 
        //var tree = $("#RB_Statements_tree").fancytree("getTree");
        //alert("We have " + tree.count() + " nodes.");
        </script>

        <!--The title of this page-->
          <h4> Vicarious Conversation</h4>

            <!-- Table: Role-Based Statements -->
            <table id="RB_Statements_tree">
            <colgroup>
            <col width="100px">
            <col width="300px">
            </colgroup>
            <thead>
              <tr> <th></th> <th></th>
            </thead>
            <tbody>
            </tbody>
          </table>
          <br>

        <script type="text/javascript">
        //Place_2: Uncaught Error: cannot call methods on fancytree prior to initialization; attempted to call method 'getTree' 
        //var tree = $("#RB_Statements_tree").fancytree("getTree");
        //alert("We have " + tree.count() + " nodes.");
        </script>
    </body>
    </html>

Upvotes: 1

Views: 3776

Answers (1)

Daqi Dong
Daqi Dong

Reputation: 23

Thanks for the suggestion from Chase.

I think the two-lines example should be added into somewhere after the initialization has been finished.

For example, I added the codes into a button's body and it works well. Here is the example about implementing a button in fancytree: http://wwwendt.de/tech/fancytree/demo/#sample-source.html

Upvotes: 1

Related Questions