Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to load children of node from http request #462

Closed
jmashore opened this issue Nov 15, 2016 · 18 comments
Closed

How to load children of node from http request #462

jmashore opened this issue Nov 15, 2016 · 18 comments

Comments

@jmashore
Copy link

Not really a bug...
I have a lazy loader tree. It starts with three top nodes (Nodes 19,20,21). I can show the top node I have some code that checks the http request for what top node they want and automatically shows it and it's children (Nodes 81,82,83)

But I want to be able to select (via javascript) the top node (node 19) and it's direct child (node 81) and display the parts associated with (node 81) - (nodes 101,102 ,103).

I know what nodes I want, I just can't figure out to get to them beyond the top node.

  • Equipment Type 1 (node 19)
    |-Manufacturer 1A (node 81)
    |-Part 1Aa (node 101)
    |-Part 1Ab (node 102)
    |-Part 1Ac (node 103)
    |-Manufacturer 1B (node 82)
    |-Manufacturer 1C (node 83)
  • Equipment Type 2 (node 20)
  • Equipment Type 3 (node 21)
@mbraak
Copy link
Owner

mbraak commented Nov 15, 2016

Do you mean that you are using the lazy loading option? Also see this example.

@jmashore
Copy link
Author

jmashore commented Nov 15, 2016

Yes, I'm using the lazy loading option. You example only shows how to load the first level and it's children, I've got that. But I also want to select one of the children and show it's children.
So if you go to http://store.balerbelt.com/products?node=21 it will Show the parent (Baler Belts Node Id 21) and it's children. Now I need to go another step further, if you click on Challenger (child node of Baler Belts) it will show a list of parts. I need to be able open the Challenger node (based on it's node id) and show it's children via javascript. I thought I could do it by simulating a click event on Challenger, but I can't seem to figure that out.

@jmashore
Copy link
Author

I forgot to mention, so in my above example, the http request might be
http://store.balerbelt.com/products?node=21,M15 where node 21 is the parent, and M15 is the child of the parent I want to open

@mbraak
Copy link
Owner

mbraak commented Nov 15, 2016

If i understand correctly, you want to:

  • display a tree
    • the tree shows the first level of nodes; the rest is loaded on demand
  • open one of the nodes ('Baler belts'); and load its children
  • then, open the node 'Challenger' which is a child of 'Baler belts'
    • this should load the children of 'Challenger'

Please tell me if this is correct.

@jmashore
Copy link
Author

Yes..that is correct

Regards,

Jim Mashore

Jim Mashore | 405.990.0118 | jmashore@adsnm.com | J.IM.MOTU


All information in this Communication, including attachments, is strictly confidential and intended solely for delivery to and authorized use by the addressee(s) identified above, and may contain privileged, confidential, proprietary and/or trade secret information entitled to protection and/or exempt from disclosure under applicable law. If you are not the intended recipient, please take notice that any use, distribution or copying of this Communication, and/or any action taken or omitted to be taken in reliance upon it, is unauthorized and may be unlawful. If you have received this Communication in error, please notify the sender and delete this Communication from your computer.

From: Marco Braak [mailto:notifications@github.com]
Sent: Tuesday, November 15, 2016 1:29 PM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

If i understand correctly, you want to:

  • display a tree
  • the tree shows the first level of nodes; the rest is loaded on demand
  • open one of the nodes ('Baler belts'); and load its children
  • then, open the node 'Challenger' which is a child of 'Baler belts'
  • this should load the children of 'Challenger'

Please tell me if this is correct.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAl8G2UAW1AZZdmyaPHUyebFv45ECfks5q-ggKgaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAlxCx3_qBpbp1Q8qCboyc2TXrOYxIks5q-ggKgaJpZM4Kyyqx.gif

@mbraak
Copy link
Owner

mbraak commented Nov 15, 2016

That's an interesting problem.

If you call the openNode function, then that will load its children if necessary.
But then you want to know when the children are loaded. And jqTree does not support that at the moment.

So, perhaps I can add a callback to openNode that is called when the node is opened (and its children are loaded).

If that is added, then your code could look something like this:

var belts_node = $tree.tree('getNodeByName', 'Baler belts');

$tree.tree(
  'openNode',
  belts_node,
  function() {
    // node is opened; its children are loaded
    var challenger_node =  $tree.tree('getNodeByName', 'Challenger');

    $tree.tree('openNode', challenger);
  }
);

Do you think this would work in your situation?

@jmashore
Copy link
Author

I think that would work in my problem yes.

I suppose if someone wanted to iterate down through more than just two nodes, they have the ability to do also.

Like you said, the callback is the important thing when using the lazy loader the tree has to be aware of the node before it can open it.

Regards,

Jim Mashore

Jim Mashore | 405.990.0118 | jmashore@adsnm.com | J.IM.MOTU


All information in this Communication, including attachments, is strictly confidential and intended solely for delivery to and authorized use by the addressee(s) identified above, and may contain privileged, confidential, proprietary and/or trade secret information entitled to protection and/or exempt from disclosure under applicable law. If you are not the intended recipient, please take notice that any use, distribution or copying of this Communication, and/or any action taken or omitted to be taken in reliance upon it, is unauthorized and may be unlawful. If you have received this Communication in error, please notify the sender and delete this Communication from your computer.

From: Marco Braak [mailto:notifications@github.com]
Sent: Tuesday, November 15, 2016 3:04 PM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

That's an interesting problem.

If you call the openNode https://mbraak.github.io/jqTree/#functions-opennode function, then that will load its children if necessary.
But then you want to know when the children are loaded. And jqTree does not support that at the moment.

So, perhaps I can add a callback to openNode that is called when the node is opened (and its children are loaded).

If that is added, then your code could look something like this:

var belts_node = $tree.tree('getNodeByName', 'Baler belts');

$tree.tree(
'openNode',
belts_node,
function() {
// node is opened; its children are loaded
var challenger_node = $tree.tree('getNodeByName', 'Challenger');

$tree.tree('openNode', challenger);

}
);

Do you think this would work in your situation?


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAl-_ELJ7TtyZsycLFfdguWMdOiGD4ks5q-h4wgaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAly6cGqyGY2O52aK5NBh_cOp_DJ9Nks5q-h4wgaJpZM4Kyyqx.gif

@mbraak
Copy link
Owner

mbraak commented Nov 16, 2016

I added the on_finished callback to the openNode function. It's in the dev branch.

As stated in the comment above you can use it as follows:

function handleOpenNode(node) {
  console.log('openened', node);
}

$tree.tree('openNode', node1, handleOpenNode);

If you want to configure the sliding animation, then sliding is the second parameter, and on_finished the third:

// turn sliding animation off
$tree.tree('openNode', node1, false, handleOpenNode);

Thank you for suggesting this feature. I think it is really useful. Please let me know if it works.

Cheers,
Marco

@jmashore
Copy link
Author

Marco..

Thanks so much for doing this. I’ll pull down the Dev branch and test it as soon as I can.

Once again thanks for being so responsive !

Regards,

Jim Mashore

Jim Mashore | 405.990.0118 | jmashore@adsnm.com | J.IM.MOTU


All information in this Communication, including attachments, is strictly confidential and intended solely for delivery to and authorized use by the addressee(s) identified above, and may contain privileged, confidential, proprietary and/or trade secret information entitled to protection and/or exempt from disclosure under applicable law. If you are not the intended recipient, please take notice that any use, distribution or copying of this Communication, and/or any action taken or omitted to be taken in reliance upon it, is unauthorized and may be unlawful. If you have received this Communication in error, please notify the sender and delete this Communication from your computer.

From: Marco Braak [mailto:notifications@github.com]
Sent: Wednesday, November 16, 2016 2:52 AM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

I added the on_finished callback to the openNode function. It's in the dev branch.

As stated in the comment above you can use it as follows:

function handleOpenNode(node) {
console.log('openened', node);
}

$tree.tree('openNode', node1, handleOpenNode);

If you want to configure the sliding animation, then sliding is the second parameter, and on_finished the third:

// turn sliding animation off
$tree.tree('openNode', node1, false, handleOpenNode);

Thank you for suggesting this feature. I think it is really useful. Please let me know if it works.

Cheers,
Marco


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAlz7v68ApTtF30yJdy6tTzG2m7lRNks5q-sRIgaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAl3bYeyr4LYpkgzeqCh3BEf9JaDA5ks5q-sRIgaJpZM4Kyyqx.gif

@jmashore
Copy link
Author

Marco:

I downloaded the latest Dev Branch code but it doesn’t appear the callback is executing..

I’m not getting the “Node is open executing callback…” message at all

belts.node is populated so I know it’s doing that right..

It’s children show Challenger at index 6 in the children array so that’s there.

I redownloaded the dev branch again just to be sure I had it right. But still didn’t work.

$(document).ready(function () {
loadTree(); //initializes the tree

var belts_node = menuTree.tree('getNodeByName', 'Baler Belts');
console.log("belts node");
console.log(belts_node);

menuTree.tree(
    'openNode',
    belts_node,
    function () {
        console.log("Node is open: executing callback; it's children are open");
        // node is opened; its children are loaded
        var challenger_node = menuTree.tree('getNodeByName', 'Challenger');
        console.log("Challenger Node:");
        console.log(chanllenger_node);

        menuTree.tree('openNode', challenger_node);
    }
);

//if (nodeToUse != "") {
//    var node = menuTree.tree('getNodeById', "ET" + nodeToUse);
//    menuTree.tree('openNode', node);
//}

});

var menuTree = $('#tree1');

function loadTree() {

data = [{"id": "ET21", "label": "Baler Belts", "load_on_demand": true}];

menuTree.tree({
        data: data,
        dataUrl: "gettree?action=gettree",
        autoOpen: true,
        dragAndDrop: false,
        autoEscape: false,
        saveState: true,
        slide: false,
        closedIcon: $('<i class="fa fa-arrow-circle-right"></i>'),
        openedIcon: $('<i class="fa fa-arrow-circle-down"></i>'),
    }
);

}

From: Marco Braak [mailto:notifications@github.com]
Sent: Wednesday, November 16, 2016 2:52 AM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

I added the on_finished callback to the openNode function. It's in the dev branch.

As stated in the comment above you can use it as follows:

function handleOpenNode(node) {
console.log('openened', node);
}

$tree.tree('openNode', node1, handleOpenNode);

If you want to configure the sliding animation, then sliding is the second parameter, and on_finished the third:

// turn sliding animation off
$tree.tree('openNode', node1, false, handleOpenNode);

Thank you for suggesting this feature. I think it is really useful. Please let me know if it works.

Cheers,
Marco


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAlz7v68ApTtF30yJdy6tTzG2m7lRNks5q-sRIgaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAl3bYeyr4LYpkgzeqCh3BEf9JaDA5ks5q-sRIgaJpZM4Kyyqx.gif

@mbraak
Copy link
Owner

mbraak commented Nov 17, 2016

I forgot to compile the javascript code. This is now done; the latest changes are in tree.jquery.js.
Sorry for the inconvenience.

@jmashore
Copy link
Author

Marco:

I downloaded the dev branch again and just made a clean install. Still no luck.

I shows me getting the parent node (baler_belt)

But the console log in the call back never shows…

var belts_node = menuTree.tree('getNodeByName', 'Baler Belts');
console.log("belts node");
console.log(belts_node);

menuTree.tree(
'openNode',
belts_node,
function () {
console.log("Node is open: executing callback; it's children are open");
// node is opened; its children are loaded
//var challenger_node = menuTree.tree('getNodeByName', 'Challenger');
//console.log("Challenger Node:");
//console.log(challenger_node);

    //menuTree.tree('openNode', challenger_node);
}

From: Marco Braak [mailto:notifications@github.com]
Sent: Thursday, November 17, 2016 1:03 AM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

I forgot to compile the javascript code. This is now done; the latest changes are in tree.jquery.js.
Sorry for the inconvenience.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAl8AzKfpV_t3KKT4xUJ7ZJlvhhS6gks5q-_wogaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAlz73m9UpqhRwz9_OZcDYQDAhFC0tks5q-_wogaJpZM4Kyyqx.gif

@jmashore
Copy link
Author

What version of jquery should I be using. I think I’m loading 1.11.1 on this project, it’s kinda old.

From: Marco Braak [mailto:notifications@github.com]
Sent: Thursday, November 17, 2016 1:03 AM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

I forgot to compile the javascript code. This is now done; the latest changes are in tree.jquery.js.
Sorry for the inconvenience.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAl8AzKfpV_t3KKT4xUJ7ZJlvhhS6gks5q-_wogaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAlz73m9UpqhRwz9_OZcDYQDAhFC0tks5q-_wogaJpZM4Kyyqx.gif

@mbraak
Copy link
Owner

mbraak commented Nov 17, 2016

It should work on jquery 1.11.1

@mbraak
Copy link
Owner

mbraak commented Nov 17, 2016

Let's check if you have the correct tree.jquery.js.

Can you find the string on_finished_param in the file? If so, then it's the correct version.

@jmashore
Copy link
Author

Yeah…I see it there…Ok..I’ll try it in a simpler environment.

From: Marco Braak [mailto:notifications@github.com]
Sent: Thursday, November 17, 2016 9:05 AM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

Let's check if you have the correct tree.jquery.js.

Can you find the string on_finished_param in the file? If so, then it's the correct version.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAlzYc5XGe7azmxGwke0Cl4Kk7VIYDks5q_G0ogaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAly9YEp78_n7AgM67HVvoGe07MrcWks5q_G0ogaJpZM4Kyyqx.gif

@jmashore
Copy link
Author

Marco:

I found the issue. If in our Example the tree loads initially with the Baler Belts node already open, then the callback is never executed.

If I just load Baler Belts but keep it closed (unpopulated) then the call back to open node “Challenger” executes.

This becomes an issue of your also saving the state of the tree so that when they come back to the page the tree is in it’s last used state.

I haven’t fully tested it yet, but I just thought I’d let you know.

From: Marco Braak [mailto:notifications@github.com]
Sent: Thursday, November 17, 2016 9:05 AM
To: mbraak/jqTree
Cc: jmashore; Author
Subject: Re: [mbraak/jqTree] How to load children of node from http request (#462)

Let's check if you have the correct tree.jquery.js.

Can you find the string on_finished_param in the file? If so, then it's the correct version.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #462 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AFFAlzYc5XGe7azmxGwke0Cl4Kk7VIYDks5q_G0ogaJpZM4Kyyqx . https://github.com/notifications/beacon/AFFAly9YEp78_n7AgM67HVvoGe07MrcWks5q_G0ogaJpZM4Kyyqx.gif

@mbraak
Copy link
Owner

mbraak commented Nov 17, 2016

Yes. I think this is difficult to combine with 'save_state' option. Perhaps it's better to not use 'save state' in this particular situation.

@mbraak mbraak closed this as completed Dec 2, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants