jstree set node href link and add onclick event

Question

I'm new to jQuery and jsTree and I'm trying to accomplish two things. 1) I would like a node to go to a specified url when clicked on. By default, the li has a tag where the href=#. 2) I would like to add a onClick event to certain nodes. I've searched and I can't seem to get a clear answer on how to do this. I have attempted the following:

$(function () {
    $('#leftNav').jstree({
        "core": {
            "themes": {
                'name': 'default',
                "variant": "small",
                "icons": false
            }
        },
        "checkbox": {
            "keep_selected_style": false
        },
    });
});

$('#leftNav').on("changed.jstree", function (e, data) {
    console.log(data.selected);

    var i, j;
    for (i = 0, j = data.selected.length; i < j; i++) {
        var nodeId = data.selected[i]
        nodeId = "#" + nodeId
        // 1) Code to change node url
        $(nodeId).attr("href", "http://www.google.com/")

        // 2) Code to add onClick to node
        $(nodeId).click("myFunction")
    }
});

My for data population, I'm using an asp repeater as follows:

Treeview.aspx

<div id="leftNav">
   <asp:Repeater ID="rptr" runat="server" EnableViewState="False" OnItemDataBound="loadTreeView">
      <HeaderTemplate>
         <ul>
            <li class="jstree-open">
               My Workplace
               <ul>
      </HeaderTemplate>
      <ItemTemplate>
      <li id="listItem" runat="server"></li>
      </ItemTemplate>
      <FooterTemplate>
      </ul>
      </li>
      </ul>
      </FooterTemplate>
   </asp:Repeater>
</div>

Treeview.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim tNode As TreeNode
    Dim treeView As New TreeView
    Dim tNodeCollection As New TreeNodeCollection
    tNodeCollection = treeView.Nodes

    ' Code to generate and store within
    ' a System.Web.UI.WebControls.TreeView object
    ' ...
    ' ...
    ' ...

    repeater.DataSource = tNodeCollection          
    repeater.DataBind()
End Sub

Protected Sub loadTreeView(sender As Object, e As RepeaterItemEventArgs)
    Dim tNode As TreeNode
    Dim li As New HtmlGenericControl
    Dim ul As New HtmlGenericControl("ul")
    tNode = e.Item.DataItem

    If (tNode Is Nothing) Then
        Return
    End If

    li = e.Item.FindControl("listItem")
    li.ID = tNode.Value
    li.InnerHtml = tNode.Text

    If tNode.ChildNodes.Count > 0 Then
        li.Controls.Add(ul)
        searchChildNodes(tNode.ChildNodes, ul)
    End If
End Sub

Private Sub searchChildNodes(childNodes As TreeNodeCollection, ul As HtmlGenericControl)
    Dim tNode As TreeNode
    For Each tNode In childNodes
        Dim li As New HtmlGenericControl("li")
        li.ID = tNode.Value
        li.InnerHtml = tNode.Text
        ul.Controls.Add(li)
        If tNode.ChildNodes.Count > 0 Then
            Dim unorderedList As New HtmlGenericControl("ul")
            li.Controls.Add(unorderedList)
            searchChildNodes(tNode.ChildNodes, unorderedList)
        End If
    Next
End Sub

Answer 1

If you need simply to 1) open a new window at your url and 2) call some function on selection change you can do it like this:

$('#leftNav').on("changed.jstree", function (e, data) {

    // open a new window with your url
    window.open("http://www.google.com/");

    // call a function
    myFunction();

})

In this fiddle I however preserved your iteration of all selected nodes on every new selection change: JS Fiddle

Answer 2

For #1. Do you get any errors for above code?

For #2. Add an event for select_node.jstree then get the node ID and redirect - haven't tested the code may have error.

$("#leftNav").bind('select_node.jstree', function(event, data) {
    var selectedObj = data.rslt.obj;
    //redirect if node matches - console.log(selectedObj); to find the id or title
    if(selectedObj.attr("id") == "myNode"){
      //redirect or do whatever
      windows.location("http://www.google.com");
    }
}