JQ Tree Show Only Selected Nodes With Their Parent On Button Click










0














I have to show only selected nodes and parents, and hide rest nodes when a button is clicked. Only nothing happens when I click the button.



The jsfiddle



http://jsfiddle.net/375emow0/



The code with commenting
start on button click

$('button[name="psychTree-selected"]').click( function(node)



get the selected nodes
nodesSelected = $('#psychTree').tree('getSelectedNodes');

create an array for shown nodes
nodeIdsToStay = ;

walk through selected nodes
nodesSelected.forEach( function(node)
var path = $('#psychTree').tree('getData');
path.forEach(function(n)
if (nodeIdsToStay.indexOf(n)===-1)
nodeIdsToStay.push(n);

)
)

hide the nodes not in the array
$('#psychTree').find('li').each( function()
if ( nodeIdsToStay.indexOf(this.id) === -1 )
$(this).hide();

)
)


I know how to hide the selected nodes but apparently non selected nodes do not have an identifiable class for me to search and hide by http://jsfiddle.net/tom1nkfr/



`$('button[name="psychTree-selected"]').click( function() `
`$('#psychTree').find('.jqtree-selected').each( function()`
`$(this).hide();`
`)`
`)`









share|improve this question























  • Do you have a specific question/error you're trying to resolve or are you hoping someone will do your work for you?
    – Snake14
    Nov 10 at 20:50















0














I have to show only selected nodes and parents, and hide rest nodes when a button is clicked. Only nothing happens when I click the button.



The jsfiddle



http://jsfiddle.net/375emow0/



The code with commenting
start on button click

$('button[name="psychTree-selected"]').click( function(node)



get the selected nodes
nodesSelected = $('#psychTree').tree('getSelectedNodes');

create an array for shown nodes
nodeIdsToStay = ;

walk through selected nodes
nodesSelected.forEach( function(node)
var path = $('#psychTree').tree('getData');
path.forEach(function(n)
if (nodeIdsToStay.indexOf(n)===-1)
nodeIdsToStay.push(n);

)
)

hide the nodes not in the array
$('#psychTree').find('li').each( function()
if ( nodeIdsToStay.indexOf(this.id) === -1 )
$(this).hide();

)
)


I know how to hide the selected nodes but apparently non selected nodes do not have an identifiable class for me to search and hide by http://jsfiddle.net/tom1nkfr/



`$('button[name="psychTree-selected"]').click( function() `
`$('#psychTree').find('.jqtree-selected').each( function()`
`$(this).hide();`
`)`
`)`









share|improve this question























  • Do you have a specific question/error you're trying to resolve or are you hoping someone will do your work for you?
    – Snake14
    Nov 10 at 20:50













0












0








0







I have to show only selected nodes and parents, and hide rest nodes when a button is clicked. Only nothing happens when I click the button.



The jsfiddle



http://jsfiddle.net/375emow0/



The code with commenting
start on button click

$('button[name="psychTree-selected"]').click( function(node)



get the selected nodes
nodesSelected = $('#psychTree').tree('getSelectedNodes');

create an array for shown nodes
nodeIdsToStay = ;

walk through selected nodes
nodesSelected.forEach( function(node)
var path = $('#psychTree').tree('getData');
path.forEach(function(n)
if (nodeIdsToStay.indexOf(n)===-1)
nodeIdsToStay.push(n);

)
)

hide the nodes not in the array
$('#psychTree').find('li').each( function()
if ( nodeIdsToStay.indexOf(this.id) === -1 )
$(this).hide();

)
)


I know how to hide the selected nodes but apparently non selected nodes do not have an identifiable class for me to search and hide by http://jsfiddle.net/tom1nkfr/



`$('button[name="psychTree-selected"]').click( function() `
`$('#psychTree').find('.jqtree-selected').each( function()`
`$(this).hide();`
`)`
`)`









share|improve this question















I have to show only selected nodes and parents, and hide rest nodes when a button is clicked. Only nothing happens when I click the button.



The jsfiddle



http://jsfiddle.net/375emow0/



The code with commenting
start on button click

$('button[name="psychTree-selected"]').click( function(node)



get the selected nodes
nodesSelected = $('#psychTree').tree('getSelectedNodes');

create an array for shown nodes
nodeIdsToStay = ;

walk through selected nodes
nodesSelected.forEach( function(node)
var path = $('#psychTree').tree('getData');
path.forEach(function(n)
if (nodeIdsToStay.indexOf(n)===-1)
nodeIdsToStay.push(n);

)
)

hide the nodes not in the array
$('#psychTree').find('li').each( function()
if ( nodeIdsToStay.indexOf(this.id) === -1 )
$(this).hide();

)
)


I know how to hide the selected nodes but apparently non selected nodes do not have an identifiable class for me to search and hide by http://jsfiddle.net/tom1nkfr/



`$('button[name="psychTree-selected"]').click( function() `
`$('#psychTree').find('.jqtree-selected').each( function()`
`$(this).hide();`
`)`
`)`






jquery jqtree






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 21:57

























asked Nov 10 at 20:45









Chiemi Sayuri

32




32











  • Do you have a specific question/error you're trying to resolve or are you hoping someone will do your work for you?
    – Snake14
    Nov 10 at 20:50
















  • Do you have a specific question/error you're trying to resolve or are you hoping someone will do your work for you?
    – Snake14
    Nov 10 at 20:50















Do you have a specific question/error you're trying to resolve or are you hoping someone will do your work for you?
– Snake14
Nov 10 at 20:50




Do you have a specific question/error you're trying to resolve or are you hoping someone will do your work for you?
– Snake14
Nov 10 at 20:50












1 Answer
1






active

oldest

votes


















0














I'd recommend a simpler approach - it looks like you're trying to find all the nodes that are selected, push those into an array, then iterating over the entire jsTree and hiding any nodes not in the array you created. Instead, leverage the CSS classes that jsTree is already applying to selected nodes and just hide all those that don't have it.



Simplified JS:



$('button[name="psychTree-selected"]').click(function() 
$('#psychTree li.jqtree_common').each(function(index,elem)
if(!$(elem).hasClass('jqtree-folder') && !$(elem).hasClass('jqtree-selected'))
$(elem).hide();

);
)


Still triggered on your button click, but now it iterates through all the tree nodes and hides any that are (1) not selected and (2) not parent/folder nodes.



Working JSFiddle: http://jsfiddle.net/tbwjau5m/






share|improve this answer




















  • Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
    – Chiemi Sayuri
    Nov 11 at 8:48










  • @ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
    – Stevangelista
    Nov 11 at 14:57










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243237%2fjq-tree-show-only-selected-nodes-with-their-parent-on-button-click%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














I'd recommend a simpler approach - it looks like you're trying to find all the nodes that are selected, push those into an array, then iterating over the entire jsTree and hiding any nodes not in the array you created. Instead, leverage the CSS classes that jsTree is already applying to selected nodes and just hide all those that don't have it.



Simplified JS:



$('button[name="psychTree-selected"]').click(function() 
$('#psychTree li.jqtree_common').each(function(index,elem)
if(!$(elem).hasClass('jqtree-folder') && !$(elem).hasClass('jqtree-selected'))
$(elem).hide();

);
)


Still triggered on your button click, but now it iterates through all the tree nodes and hides any that are (1) not selected and (2) not parent/folder nodes.



Working JSFiddle: http://jsfiddle.net/tbwjau5m/






share|improve this answer




















  • Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
    – Chiemi Sayuri
    Nov 11 at 8:48










  • @ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
    – Stevangelista
    Nov 11 at 14:57















0














I'd recommend a simpler approach - it looks like you're trying to find all the nodes that are selected, push those into an array, then iterating over the entire jsTree and hiding any nodes not in the array you created. Instead, leverage the CSS classes that jsTree is already applying to selected nodes and just hide all those that don't have it.



Simplified JS:



$('button[name="psychTree-selected"]').click(function() 
$('#psychTree li.jqtree_common').each(function(index,elem)
if(!$(elem).hasClass('jqtree-folder') && !$(elem).hasClass('jqtree-selected'))
$(elem).hide();

);
)


Still triggered on your button click, but now it iterates through all the tree nodes and hides any that are (1) not selected and (2) not parent/folder nodes.



Working JSFiddle: http://jsfiddle.net/tbwjau5m/






share|improve this answer




















  • Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
    – Chiemi Sayuri
    Nov 11 at 8:48










  • @ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
    – Stevangelista
    Nov 11 at 14:57













0












0








0






I'd recommend a simpler approach - it looks like you're trying to find all the nodes that are selected, push those into an array, then iterating over the entire jsTree and hiding any nodes not in the array you created. Instead, leverage the CSS classes that jsTree is already applying to selected nodes and just hide all those that don't have it.



Simplified JS:



$('button[name="psychTree-selected"]').click(function() 
$('#psychTree li.jqtree_common').each(function(index,elem)
if(!$(elem).hasClass('jqtree-folder') && !$(elem).hasClass('jqtree-selected'))
$(elem).hide();

);
)


Still triggered on your button click, but now it iterates through all the tree nodes and hides any that are (1) not selected and (2) not parent/folder nodes.



Working JSFiddle: http://jsfiddle.net/tbwjau5m/






share|improve this answer












I'd recommend a simpler approach - it looks like you're trying to find all the nodes that are selected, push those into an array, then iterating over the entire jsTree and hiding any nodes not in the array you created. Instead, leverage the CSS classes that jsTree is already applying to selected nodes and just hide all those that don't have it.



Simplified JS:



$('button[name="psychTree-selected"]').click(function() 
$('#psychTree li.jqtree_common').each(function(index,elem)
if(!$(elem).hasClass('jqtree-folder') && !$(elem).hasClass('jqtree-selected'))
$(elem).hide();

);
)


Still triggered on your button click, but now it iterates through all the tree nodes and hides any that are (1) not selected and (2) not parent/folder nodes.



Working JSFiddle: http://jsfiddle.net/tbwjau5m/







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 11 at 0:20









Stevangelista

1,6291615




1,6291615











  • Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
    – Chiemi Sayuri
    Nov 11 at 8:48










  • @ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
    – Stevangelista
    Nov 11 at 14:57
















  • Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
    – Chiemi Sayuri
    Nov 11 at 8:48










  • @ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
    – Stevangelista
    Nov 11 at 14:57















Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
– Chiemi Sayuri
Nov 11 at 8:48




Wow thanks. I don't know why I didn't think of just using the classes. I mean I used the class to show only selected. I make things too complicated.
– Chiemi Sayuri
Nov 11 at 8:48












@ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
– Stevangelista
Nov 11 at 14:57




@ChiemiSayuri - great, glad to hear. If my answer suffices, please accept it.
– Stevangelista
Nov 11 at 14:57

















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243237%2fjq-tree-show-only-selected-nodes-with-their-parent-on-button-click%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Top Tejano songwriter Luis Silva dead of heart attack at 64

政党

天津地下鉄3号線