How to create root node without selected node

[Alyson Melo]

I am using the new version 3.0 beta 3. I am trying to create a root node without previous selected node.

I tried this: $("tree").jstree('create_node', -1 , 'last', { 'attr' : { 'id' : newId } , 'data' : new Name} );

Nothing happens! :P

[Ivan Bozhanov]

Read the new docs :)
Try:
$("tree").jstree('create_node', '#', { 'attr' : { 'id' : newId } , 'text' : new Name}, 'last');

[Lance Sloan]

I'm glad I found this.  I've read the docs, but I didn't see anything about using "#" as the reference to the tree's root to make nodes in the first level.  I had to make a change in the code in order for the ID to be assigned.  Something along the lines of:

$("tree").jstree('create_node', '#', {'id' : 'newId', 'text' : 'new Name'}, 'last');

That is, no "attr".  "id" is moved up a level.  I did find that in the documentation.

[David Mann]

Ivan and Lance,

I'm having the same problem. I have been reading the new documentation carefully for weeks but I can't find any reference to "#" in relation to the create_node method. I'm trying to create a customised menu which calls create_node from various items. I started from the editable demo and created an item with an action to the context menu. Here is my configuration. I added the property contextmenu to the configuration of the demo

"contextmenu": {
                        "select_node": true,
                        "items": function(node) {
                            var obj = {
                                "add_folder": {
                                    "label": "Add Folder",
                                    "action": function(args) {
                                        //var sel = $("#jstree_demo").jstree('create_node', '#', {'id' : 'new Id', 'text' : 'new Name'}, 'last');
                                        //var sel = $("#jstree_demo").jstree('create_node', '#', { 'attr' : { 'id' : "newId" } , 'text' : "newName"}, 'last');
                                        //var sel = $("#jstree_demo").jstree(true).create_node('#', { 'attr' : { 'id' : "newId" } , 'text' : "newName"}, 'last');
                                        var sel = $("#jstree_demo").jstree(true).create_node("#", {
                                            "text": "New Folder",
                                            "type": "root"
                                        }, "first", null, false);
                                        console.log(sel);
                                    }
                                }
                            };
                            return obj;
                        }
                    }

I couldn't get any of the 3 commented-out alternatives to create a new root folder and false appeared in the console. I found I had to add the type attribute to the new node properties and set it to "root". I can't see anything in the docs that clarifies this.

Ivan, when you say "read the docs", could you give us a reference. In this case, I'm assuming you mean the create_node method, but the datatype "mixed" covers a wide range of possibilities. The explanation for the object to pass to the new node "the data for the new node (a valid JSON object, or a simple string with the name)" doesn't specifiy the need to pass the value "root" to the type property. 

[David Mann]

Just noticed the valid_children property in the types plug-in docs. The demo has that property set so create_node doesn't create a new node if its type is invalid.

[Ivan Bozhanov]

You can also use the last_error function for details if something fails.

[David Mann]

Ivan,

If I get an instance with syntax like

var instance = $("#tree").jstree(true);

then try to call instance.last_error(), I get an error message saying the function doesn't exist. 

[Ivan Bozhanov]

Well, it was added in beta10, maybe you are using an older version?

[David Mann]

That was it. Well done Ivan, it gave a nice clear reason when I tried to add a node with an invalid type:

""valid_children prevents function: create_node"

[Lance Sloan]

I didn't specify the node type at all. So far, it works for my purposes without the type. What I had difficulty with was figuring out how to specify the parent node for the "obj"/"par" argument when creating a top-level node. Using "#" isn't intuitive to me. I expected that using null would work, but it didn't.

Ivan, what do you think of jstree recognizing null as indicating the new node should appear at the top level? Would you add that feature?

[David Mann]

Lance, I totally agree that "#" is not intuitive, but I would like to caution against the use of null. In JavaScript there are so many falsey values. Remember that in JavaScript you need to specifically set a variable to null, otherwise it is undefined. I think Ivan is best to choose an arbitrary value which he can test for unequivocally. I'm afraid I wouldn't know what to suggest so I have no objection to "#".

Ivan, I think you need to make the "#" value for root nodes clearer in the docs. I know I can discover it in Firebug, but it's reassuring to see it in black and white.

[Lance E Sloan]

Hi, David.

I'm glad that I'm not the only one that wishes for something clearer than "#" in this case.

I disagree about using null, though.  I think it would be safe if jstree's create_node tested for "(par === null)".

Anyway, before I realized I needed to use "#", besides null, the other values I tried were the strings "root" and the ID of the div element containing my tree. 

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online disk space from Dropbox: http://db.tt/anbh6EW

--
You received this message because you are subscribed to a topic in the Google Groups "jsTree" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jstree/TXaRM8BXw0c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.
To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

[Ivan Bozhanov]

The null change is in the repo and I added a comment in the api documentation about creating root nodes (it will be on jstree.com when I release the next version).

Best regards,
Ivan

[Walter White]

Ok. It work's great but how make that the element required give a name after creating him ?

[Ivan Bozhanov]

Wrong topic I guess - but anyway:
var ref = $("tree").jstree('create_node', '#', { 'attr' : { 'id' : newId } , 'text' : new Name}, 'last');
$('#tree').jstree('edit', ref);

Btw - the code you are looking for is on the jstree.com demo page - the demo_create function (it is a bit more complex but has the same idea. Anyway - use the above lines and it should be OK.

Best regards,
Ivan

[Lance E Sloan]

Thank you very much, Ivan.  About when will the next version be released?

On Monday, March 24, 2014, Ivan Bozhanov <ivan.b...@gmail.com> wrote:

The null change is in the repo and I added a comment in the api documentation about creating root nodes (it will be on jstree.com when I release the next version).

--

[Ivan Bozhanov]

Well, so far I try to release a new version every week or two. I will keep to that schedule. So I guess by the end of this week I will release the final version.

[Lance E Sloan]

Sounds good.  I'm really enjoying jsTree, by the way.  It's perfect for displaying data from Google Drive.

Thanks again!

--

Lance E Sloan, Application Developer
Univ. of Michigan, Info. and Tech. Services, AIS AMP
http://www.its.umich.edu/
Get free online disk space from Dropbox: http://db.tt/anbh6EW

[Eric Roberts]

i am using that method and it isn't working.  Here is my code:

function createRoundArea()
                                    {
                                        var ref = $('##leftCol').jstree(true),
                                        sel = ref.get_selected();
                                        if(!sel.length) { return false; }
                                        sel = "##";
                                        sel = ref.create_node(sel, {"icon":"include/css/images/roundAreaIcon.jpg"});
                                        if(sel) {ref.edit(sel);}

                                    };

[Eric Roberts]

BTW...ignore the double pound sign.  I am using ColdFusion and the pound sign needs to be escaped.  When the browser gets it, it is a single pound sign.

[Ivan Bozhanov]

To achieve what I think you are trying to achieve - simply remove rows 2 and 3 in your function. What you are doing basically is asking the tree for the currently selected node, then if no node is selected - the create operation is aborted, and then if a selected node exists, you override the variable containing the selected node with "#". That makes no sense - simply remove the lines where you get the selected node and return false if no such node exists.

Best regards,
Ivan

[Eric Roberts]

I want it to, regardless if a node is slected or not...to create a root node.  The odd thing is that at one point...doing as I copied actually worked...then it stopped working and I don't know why.

So if I have the following

Root1

    sub item1

    sub item 2

       sub sub item 1

   sub item 3

Root2

If I either have nothing selected or any of the above selected, it would create a root node at the level of Root 1 and Root 2...just to make sure we are on the same sheet of music :-D  Thanks for your help!  This is the last item I need help with to get my page working.  It's a pretty cool setup you have.

Eric Roberts

Sr. ColdFusion Developer

NRG Energy

I do have a question not related to this...why not have the plugin files in SRC define the plugins, instead of having all of the code in jstree.js...making them true plugins?  It would push more to the OOP model that jquery makes use of and it would make debugging some of the code a bit easier.  I am not fan of having to go through thousands of lines of code...I like the OOP model where it is broken down into separate files.  I just find it easier to deal with.

--

[Eric Roberts]

I removed the lines you specified and it still is not working:

function createRoundsArea()
    {
        var ref = $('#leftCol').jstree(true),
        sel = "null";

        sel = ref.create_node(sel, {"icon":"include/css/images/roundAreaIcon.jpg"});
        if(sel) {ref.edit(sel);}
    };

I also tried:

function createRoundsArea()
    {
        var ref = $('#leftCol').jstree(true),
        sel = ref.create_node("null", {"icon":"include/css/images/roundAreaIcon.jpg"});
        if(sel) {ref.edit(sel);}

    };

Below is a screenshot.  I am in the left column.  I want the "RoundsArea" button to create a item at the same level as "Mandalay".  Rounds works just fine as is.  When i click on the button...it does nothing.  I don't get any js errors either...

[Ivan Bozhanov]

As for the not working part:
Please note that "null" is not the same as null - the first one is a string, the other is a special JS type.
Replace this:
sel = "null";
With
sel = null;

As for the files question:
You can work with the files in the src folder if that is more convenient for you. The files in the dist folder are generated from the files in the "src" folder by a build script - I do not edit the "dist" files manually. To use the src files - either use a dependency manager or include them all manually.
The idea behind a single file is fewer HTTP requests (hence speed) and also - a lot of people prefer to work with 3rd party libs as a black box - they just get the single minified jstree.min.js file (and the theme folder) and include it on a page (or have it loaded by a dependency manager).

Basically - you can work with jstree as it suits you - either use the small src files or the large dist file.

Best regards,
Ivan

понеделник, 28 септември 2015 г., 3:14:31 UTC+3, Eric Roberts написа:

I want it to, regardless if a node is slected or not...to create a root node.  The odd thing is that at one point...doing as I copied actually worked...then it stopped working and I don't know why.

So if I have the following

Root1

    sub item1

    sub item 2

       sub sub item 1

   sub item 3

Root2

If I either have nothing selected or any of the above selected, it would create a root node at the level of Root 1 and Root 2...just to make sure we are on the same sheet of music :-D  Thanks for your help!  This is the last item I need help with to get my page working.  It's a pretty cool setup you have.

Eric Roberts

Sr. ColdFusion Developer

NRG Energy

I do have a question not related to this...why not have the plugin files in SRC define the plugins, instead of having all of the code in jstree.js...making them true plugins?  It would push more to the OOP model that jquery makes use of and it would make debugging some of the code a bit easier.  I am not fan of having to go through thousands of lines of code...I like the OOP model where it is broken down into separate files.  I just find it easier to deal with.

To unsubscribe from this group and all its topics, send an email to jstree+unsubscribe@googlegroups.com.

[Eric Roberts]

Thanks for the info on the SRC files. 

On to the meat...

so here is my function now:

function createRoundsArea()
                                    {
                                        var ref = $('#leftCol').jstree(true),
                                        sel = null;

                                        sel = ref.create_node(sel, {"icon":"include/css/images/roundAreaIcon.png"});
                                        if(sel) {ref.edit(sel);}

                                    };

If I walk it through the debugger, sel never takes on a value (like 'j1_2') like it does when I create a child item.  The value remains false.  No node is created.

Eric

To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.

[Ivan Bozhanov]

It all depends on your tree config. Maybe you have types enabled. Use the core.error callback to detect any errors, or call ref.last_error(); after trying to create the node.

Best regards,
Ivan

[Thị Mai Vũ]

who can me know to creat , rename and delete jstree node in controller of yii2?

Vào 00:57:06 UTC+7 Thứ Sáu, ngày 17 tháng 1 năm 2014, Alyson Melo đã viết: