How to fire up hyperlink using JStree

[jeffrey cayanan]

Hello Guys,

Please help me with my problem.

I have jstree constructed well.

but my problem is my hyperlink is not working when I click each node. parent or child has a hyperlink that will redirect you on different page.

Here's my code for Div.

<div id="systree">

    <ul>

        @foreach (SysMenuDTO dto in @Model)

        {

            <li>

            <a href="@Url.Action(@dto.menuNm, new { controller = @dto.controller, slug = "my-page-slug" })">@dto.menuDescr</a>

                <ul>

                    @foreach (SysMenuDTO dtoChild in (new SysMenuDAO()).getParent(dto.id))

                    {

                        <li><a href="@Url.Action(@dtoChild.menuNm, new { controller = @dtoChild.controller, slug = "my-page-slug" })">@dtoChild.menuDescr</a>

                        </li>

                    }

                </ul>

            </li>          

        }

    </ul>

</div>

and here's the code for jquery----------------------------------

<link href="../../Scripts/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/dist/libs/jquery.js" type="text/javascript"></script>

<script src="../../Scripts/dist/jstree.min.js" type="text/javascript"></script>

 $(function () {

$("#systree").jstree({

           "plugins": ["core", "themes", "html_data", "search"] 

    });

 }); 

Thanks for your help.

[Ivan Bozhanov]

Use the changed.jstree event or select_node.jstree event - get the link and go to it, like so:

    $("#systree").jstree({

           "plugins": ["core", "themes", "html_data", "search"] 

    }).on("select_node.jstree", function (e, data) {
           document.location = data.instance.get_node(data.node, true).children('a').attr('href');
    });

I have not tested this, but it should work.

[Максим Шадрин]

Hello, Ivan.

Thank you for jsTree 3!

Plugin "state" is not working when I use your advice about hyperlink

This is a bug? Or am I doing something wrong?

Here's my code:

$('#nav_tree').jstree({

  'core' : {

    'themes' : { "stripes" : true },  

    'data' : {

      'url' : '/manager/pages/sitemap_pages.php',

    }

   }, 

   

  "search" : { 'fuzzy' : false },     

   

  "types" : {

  "page" : {

  "icon" : "/jscripts/jsTree/themes/classic/page.gif"

  },

  "page_index" : {

  "icon" : "/jscripts/jsTree/themes/classic/page_index.gif"

  }

  },

  "plugins" : ["types", "state", "search"]

         

}).on("changed.jstree", function (e, data) {

           location.href = data.instance.get_node(data.node, true).children('a').attr('href');

});

вторник, 7 января 2014 г., 16:48:45 UTC+4 пользователь Ivan Bozhanov написал:

[Ivan Bozhanov]

Why would you use a state when you are redirecting? That will create an endless loop. If you want to redirect but have the node visually selected on the next page you have to approach this differently:

$('#nav_tree').jstree({

  'core' : {

    'themes' : { "stripes" : true },  

    'data' : {

      'url' : '/manager/pages/sitemap_pages.php',

    }

   }, 

   

  "search" : { 'fuzzy' : false },     

   

  "types" : {

  "page" : {

  "icon" : "/jscripts/jsTree/themes/classic/page.gif"

  },

  "page_index" : {

  "icon" : "/jscripts/jsTree/themes/classic/page_index.gif"

  }

  },

  "plugins" : ["types", "state", "search"]

         

}).one("restore_state.jstree", function () {
     $(this).on("changed.jstree", function (e, data) {
           data.instance.save_state();

           location.href = data.instance.get_node(data.node, true).children('a').attr('href');

     });

});

I have not tested this, but it should work - give it a try.

Best regards,
Ivan

[G4uKu]

It's really working great but still there is a problem this not still working in IE8. what should i do?  

[Ivan Bozhanov]

jstree supports IE8 provided it is in standards mode. If something is not working for you - please provide more info - error message, line of the error, etc.

Best regards,
Ivan

[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) {document.location = data.instance.get_node(data.node, true).children('a').attr('href');   });  });  </script>