views:

16

answers:

0

I am using async jquery treeview to build a tree. The treeview is populated based on the selection of dropdown list(select input).

Everything works fine for the first time of treeview load. When the select option is changed and the treeview is built then the nodes expand but do not collapse. Has any one got such a problem. I would be thankful for any kind of help.


$("#ddl_warehouse").bind('change', function(event) {
    $("#treeview").html("");
    var warehouse = $("#ddl_warehouse option:selected").val();
    $("#loadingdiv").unbind('ajaxStart');
    $("#treeview").treeview({ url: "Merchandise.ashx", site: warehouse, collapsed: true, unique: true });                            
    event.preventDefault();
});

function load(settings, root, child, container) {
    $.getJSON(settings.url, {
        root: root,
        site: settings.site
    }, function (response) {

        function createNode(parent) {
            if (this.id.length == 9) {
                var current = $("<li/>").attr("id", this.id || "").html("<a rel='MC' style='text-decoration:none;color:#000000;font-size:8pt' href='" + this.id + "'>" + this.text + "</a>").appendTo(parent);
            } else {
                var current = $("<li/>").attr("id", this.id || "").html("<span style='font-weight:bold '>" + this.text + "</span>").appendTo(parent);
            }
            if (this.classes) {
                current.children("span").addClass(this.classes);
            }
            if (this.expanded) {
                current.addClass("open");
            }
            if (this.hasChildren || this.children && this.children.length) {
                var branch = $("<ul/>").appendTo(current);
                if (this.hasChildren) {
                    current.addClass("hasChildren");
                    createNode.call({
                        text: "placeholder",
                        id: "placeholder",
                        children: []
                    }, branch);
                }
                if (this.children && this.children.length) {
                    $.each(this.children, createNode, [branch])
                }
            }
        }

        $.each(response, createNode, [child]);
        $(container).treeview({
            add: child
        });

        $("a[rel='MC']").bind('click', function (event) {

            var MC = $(this).attr("href");
            MCclick(MC);
            event.preventDefault();
        });
    });


}

var proxied = $.fn.treeview;

$.fn.treeview = function (settings) {
    if (!settings.url) {
        return proxied.apply(this, arguments);
    }
    var container = this;
    load(settings, "source", this, container);
    var userToggle = settings.toggle;
    return proxied.call(this, $.extend({}, settings, {
        collapsed: true,
        toggle: function () {
            var $this = $(this);
            if ($this.hasClass("hasChildren")) {
                var childList = $this.removeClass("hasChildren").find("ul");
                childList.empty();
                load(settings, this.id, childList, container);
            }
            if (userToggle) {
                userToggle.apply(this, arguments);
            }
        }
    }));
};