0

I am trying to create a tree navigator using asp.net and jQuery.

first I get the root nodes from database and bind them to asp Repeater as bellow,

<ul>
   <asp:Repeater ID="repMail" runat="server">
      <ItemTemplate>
         <li class="list <%# Eval("Type") %>" id="<%# Eval("Id") %>">
            <span style="margin-right: 10px" class="glyphicon <%# GetIcon(Eval("Type"))  %>"></span><%# Eval("Title") %>
         </li>
      </ItemTemplate>
   </asp:Repeater>
</ul>

and then when user click on the one of the root node i am loading the children...it will go until there is no folder. Jquery is as bellow,

$('.list.Folder').click(function (e) {
    e.stopPropagation();

    var self = $(this);
    var s = self.find('span');
    var children = self.find(' > ul > li');
    var count = children.length;

    //check if child nodes already append
    if (count == 0) {
        //changing icon folder open
        if (s.hasClass('glyphicon-folder-close')) {
            s.removeClass('glyphicon-folder-close');
            s.addClass('glyphicon-folder-open');

            var code = self.attr('id');

            // get the child nodes from database using ajax get
            var url = "TreeItem";
            var arg = {
                action: 'GetNodes',
                type: 'Folder',
                data: code
            };
            $.get(url, arg)
                .done(function (r) {
                    var msgAll = $.parseJSON(r);
                    var u = $('<ul>');
                    for (var i = 0; i < msgAll.length; i++) {
                        var m = msgAll[i];

                        if (m.Type === 'Folder') {
                            u.append('<li class="list ' + m.Type + '" id="' + m.Id + '"><span style="margin-right: 10px" class="glyphicon glyphicon-folder-close"></span>' + m.Title + '</li>');
                        } else if (m.Type === 'List') {
                            u.append('<li class="list ' + m.Type + '" id="' + m.Id + '"><span style="margin-right: 10px" class="glyphicon glyphicon-leaf"></span>' + m.Title + '</li>');
                        }
                    }
                    u.append('</ul>');
                    u.appendTo(self);
                })
                .fail(function () {
                });
        }
    } else {
        if ((s.hasClass('glyphicon-folder-open')) && (children.is(':visible'))) {
            s.removeClass('glyphicon-folder-open');
            s.addClass('glyphicon-folder-close');

            children.hide();
        } else if ((s.hasClass('glyphicon-folder-close')) && (children.is(':hidden'))) {
            s.removeClass('glyphicon-folder-close');
            s.addClass('glyphicon-folder-open');

            children.show();
        }
    }
    return false;
});

In here from 'GetIcon' method it will return 'glyphicon-folder-close' if Type is a Folder and 'glyphicon-leaf' if it is just a node.

My issue is when I click on the second level Folder li item it will refer to parent though I have use stopPropagation() and return false.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
dula
  • 51
  • 1
  • 2
  • 9
  • 1
    A simple version of [your code](https://jsfiddle.net/wL8o5naw/) does not exhibit this errant behaviour. – Jaromanda X Sep 27 '17 at 03:57
  • Oh, I see ... the second level `li` are added dynamically? Then they wont have ANY event handlers on them - you'll want a [delegated](https://learn.jquery.com/events/event-delegation/) event handler - see simple example [here](https://jsfiddle.net/wL8o5naw/1/) – Jaromanda X Sep 27 '17 at 03:58
  • there's a question on so that may help too https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on – Jaromanda X Sep 27 '17 at 04:03
  • @Jaromanda : yes it is because of I am adding li dynamically and they don't have event handlers....after I bind event handlers it is working. – dula Sep 27 '17 at 06:23

0 Answers0