Wanted: Dynamic loading example

[GoogleCodeExporter]

I'd love to see an example with ajax-driven loading. I'm trying to figure 
this out myself, but can't come up with a working solution.

This is the closest I've come, but I don't know how to re-parse the new 
branch:

jQuery('ul.tree').checkTree({
    onExpand: function(el) {
        //Hit the server and fill the child nodes with what shows 
up there
        parent_id = el.find("input").val();
        sublist = el.find("ul:first");
        sublist.load('getGhildren.php', 'parent_id='+parent_id);
        //sublist.checkTree(); //this breaks things, and the 
children no longer appear
    }
});

Original issue reported on code.google.com by rpeters%...@gtempaccount.com on 10 Aug 2009 at 7:08

[GoogleCodeExporter]

I think this can be resolved by changing line 35 to:
var $tree = jQuery(this);

This way, it's only re-parsing the items that checkTree is actually called on.

So the code I used is:
jQuery('ul.tree').checkTree({onExpand: onExpand});

function onExpand(el)
{
    //Hit the server and fill the child nodes with what shows up there
    parent_id = el.find("input:first").val();
    sublist = el.find("ul:first");
    sublist.addClass("expanding");
    sublist.load('getChildren.php', 'parent_id='+parent_id, expandDone);
}

function expandDone()
{
    sublist = jQuery('ul.expanding');
    sublist.removeClass("expanding");
    sublist.checkTree({onExpand: onExpand});
}

But it's still not perfect when the user expands many nodes at once, so I'd 
still 
like help there. (Some of the sub-trees don't get styled, so onExpand must not 
have 
been called / was ignored for them.)

Original comment by rpeters%...@gtempaccount.com on 10 Aug 2009 at 10:34

[GoogleCodeExporter]

Figured it out, in expandDone you can identify the specific element it was 
loaded 
into via this:

function onExpand(el)
{
    //Hit the server and fill the child nodes with what shows up there
    parent_id = el.find("input:first").val();
    sublist = el.find("ul:first");
    sublist.load('getChildren.php', 'parent_id='+parent_id, expandDone);
}

function expandDone(responseText, textStatus, XMLHttpRequest)
{
    sublist = jQuery(this);
    sublist.checkTree({onExpand: onExpand});
}

Original comment by rpeters%...@gtempaccount.com on 11 Aug 2009 at 3:38

[GoogleCodeExporter]

Original comment by jgeewax on 30 Sep 2009 at 4:14

• Added labels: Component-UI, Type-Task
• Removed labels: Type-Defect

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I needed to use a dynamic checkTree also (my full node count is more than 10,000
items - not a chance we could make this performance tolerable). However this 
dynamic
method was short on two accounts for my requirements. So here are the issues /
solutions...

1) This method re-fetched the sub-tree each time a node was expanded. My 
requirement
only needed the sub-tree fetching once, as users may unexpand a node and toggle 
at will.

Solution: boolean test if sublist has children before issuing the .load()

        if($(sublist).children().size()==0){
            sublist.load('getChildren.php', 'parent_id='+parent_id, expandDone);
        }

2) This method did not allow the dynamically fetched items to inherit the
selection-state of the parent. My requirement was that if a node is selected 
then
when it is expanded the dynamically added children in the sub-tree should be in 
a
selected state (as they would in a static tree).

Solution: retrieve the selected state from parent and apply to each child in 
the subtree.

        checked_value = sublist.parent().find("div.checkbox").attr("class");
        sublist.find("div.checkbox").each(function(){
            $(this).attr("class", checked_value);
            });

So, those adapted functions in full...

   function onExpand(el)
    {
        //Hit the server and fill the child nodes with what shows up there
        parent_id = el.find("input:first").val();
        sublist = el.find("ul:first");
        sublist.addClass("expanding");
        if($(sublist).children().size()==0){
            sublist.load('getChildren.php', 'parent_id='+parent_id, expandDone);
        }
    }

    function expandDone()
    {
        sublist = jQuery('ul.expanding');
        sublist.removeClass("expanding");
        sublist.checkTree({onExpand: onExpand});
        checked_value = sublist.parent().find("div.checkbox").attr("class");
        sublist.find("div.checkbox").each(function(){
            $(this).attr("class", checked_value);
            });
    }

Original comment by garry.be...@gmail.com on 12 Apr 2010 at 1:09

[GoogleCodeExporter]

A slight error occurs on the inheritance with the above adaption because the
'expanding' class is always added by OnExpand but only removed when expandDone 
is
called. It is neccesary to have these work in tandem!!! 

In this instance .addClass should only be issued *within* the IF() statement

   function onExpand(el)
    {
        //Hit the server and fill the child nodes with what shows up there
        parent_id = el.find("input:first").val();
        sublist = el.find("ul:first");
        if($(sublist).children().size()==0){
            sublist.addClass("expanding");
            sublist.load('getChildren.php', 'parent_id='+parent_id, expandDone);
        }
    }

    function expandDone()
    {
        sublist = jQuery('ul.expanding');
        sublist.removeClass("expanding");
        sublist.checkTree({onExpand: onExpand});
        checked_value = sublist.parent().find("div.checkbox").attr("class");
        sublist.find("div.checkbox").each(function(){
            $(this).attr("class", checked_value);
            });
    }

Original comment by garry.be...@gmail.com on 12 Apr 2010 at 2:31