HTML data : href on each JSTree node

[Mansi Trivedi]

Hello,

My HTML data for JSTree is like below:
<ul>
       <li>
             <a href='../../html/ProjectDetails.html' target='frmDetails'>Project Details</a>
       </li>
       <li>
             <a href='../../html/page1.html' target='frmDetails'>Page 1</a>
             <ul>
                    <li>
                          <a href='../../html/page12.html' target='frmDetails'>Page 12</a>
                    </li>
             </ul>
       </li>
</ul>
Where "frmDetails" is a frame to display the target.
The issue is the hyperlinks are not working.
When I inspect the elements in firebug, the href is set to "#" and the href value I have provided are as "undefined" like below:

<li aria-selected="true" class="jstree-node  jstree-leaf jstree-last" id="j1_4" role="treeitem">
         <i class="jstree-icon jstree-ocl"></i>
         <a undefined='../../html/ProjectDetails.html' href="#" class="jstree-anchor jstree-clicked jstree-hovered">
                <i class="jstree-icon jstree-themeicon"></i>
                Project Details</a>
</li>

Please let me know if there is any other way to achieve this.
FYI, This was working perfectly with JSTree version 1, as I have upgraded to version 3, it's the issue.

Thanks,
Mansi

[Ivan Bozhanov]

What browser is this, as if I run your HTML with the latest code from github I get everything exactly as it is supposed to be - with the proper href values. And if I want to redirect to another frame I could do:

$("#tree").on("changed.jstree", function (e, data) {
  the-frame-here.location = data.selected[0].a_attr.href;
})

Try this code.

Best regards,
Ivan

[Mansi Trivedi]

Hello Ivan,

I am getting this in both Firefox and Chrome latest versions.
Please check attached screenshots.
I may be doing some thing silly, but surely need your help.
Let me know if you need more information.

Thanks,
Mansi

[Ivan Bozhanov]

Show me your full code (config you HTML). Also make sure you are using this version of jstree: https://github.com/vakata/jstree/archive/master.zip
If you could even show me a demo that would be great, as I cannot reproduce this.

Best regards,
Ivan

[Mansi Trivedi]

Hello Ivan,

As you suggested, I have taken the latest JSTree from the given location.
That has resolved that "undefined" issue, so thanks for that.
Still, I have below needs which are not working yet.
1. The hyperlinks are not redirecting to the required page.
2. The custom icons are not getting displayed.
3. The first 2 nodes (DemoPFCDocSettingsTest, demopfc.pbl) should be opened on first load of the tree.
I have already made the changes for above points, but it seems I am not doing them properly.

Please check attached sample.
You need to open Index.html which contains 3 frames.
The left frame contains "Reference documentation\lib\jstree\files\Tree.html", which has code for JSTree.
Please follow the relative paths set for hyperlink navigation and icons.
Let me know if you need more details.

Thanks,
Mansi

[Ivan Bozhanov]

Thanks,

1) As I said in my earlier post - you should use the "changed.jstree" event to change the location (I think I also supplied the exact code you need to use).
2) You are using data attributes wrong, the correct way is (node the single and double quotes) : data-jstree='{"icon":"..."}' This is not something required by me - it is a jQuery requirement for data attributes.

Best regards,
Ivan

[Mansi Trivedi]

Hello Ivan,

Sorry to bother you for silly mistakes.
Thanks a lot for your help and patience.

Regards,
Mansi

[Lance Holden]

I have a similar issue, mostly works, but I cannot find out how to complete this.

I have 2 iFrames, The one with my tree is named: "FacilityTree" the other one with my data is named: "EDitem".

When I click on an href link in my tree it loads the page correctly, but I need it to load into the target frame: "EDitem". how??

Here is a button I have on the same treeview page, it loads this href into teh other frame no problem:

<button><a href="/frame/NewNode/Building/" target="EDitm"><strong>&#43;</strong> Add Building</a></button>

but an href embeded in my tree does not, here is my tree:

<div id="jstree" style="background-color: #F4F4F4;font-size:11px;color:#1C2833">
 <ul>
   <li data-jstree='{"icon":"/Building.gif", "opened" : true}' id="LOCBUILDING1"><a href="/ConfigSetup/EditItem.node/LOCBUILDING1/" target="EDitm">Building 1</a></li>
   <li data-jstree='{"icon":"/Building.gif", "opened" : true}' id="LOCBUILDING2"><a href="/ConfigSetup/EditItem.node/LOCBUILDING2/" target="EDitm">Building 2</a></li>
   <li data-jstree='{"icon":"/Building.gif", "opened" : true}' id="LOCBUILDING3"><a href="/ConfigSetup/EditItem.node/LOCBUILDING3/" target="EDitm">Building 3</a></li>
 </ul>
 </div>

and here are my jstree declarations, how can I make every href in my tree load into the other target iFrame? <script src="/jquery-3.3.1.min.js"></script> <script src="/jstree.min.js"></script> <script> $(function () {   // 6 create an instance when the DOM is ready   $("#jstree").jstree({ "plugins" : ["wholerow"],"core" : {"multiple" : false,}   });   // 7 bind to events triggered on the tree   $('#jstree')    .on("changed.jstree", function (e, data) {console.log(data.selected);})    .on("select_node.jstree", function (e, data) {EDitm.location = data.instance.get_node(data.node, true).children('a').attr('href');   }); }); </script>