I have installed and trying to customize Jquery File Tree so that, on click of folder name, the folder name and path are returned to the calling function. Currently it only expands and collapses folders, and returns the file name on click of file.

So I need to return the folder too and cannot see where that is triggered.

I am using the php connector. Below link is where I downloaded the sample code: /

thanks, Ed

I have installed and trying to customize Jquery File Tree so that, on click of folder name, the folder name and path are returned to the calling function. Currently it only expands and collapses folders, and returns the file name on click of file.

So I need to return the folder too and cannot see where that is triggered.

I am using the php connector. Below link is where I downloaded the sample code: http://abeautifulsite/blog/2008/03/jquery-file-tree/

thanks, Ed

• javascript
• jquery
• file
• treeview
• tree

• Add your connector script and your current jQuery and I will tell you what is needed. – Liam Bailey Commented Oct 22, 2010 at 21:29

2 Answers 2

Not sure if there is an "API" way to do it. But if you look at the source code (Line 64-81)

if( $(this).parent().hasClass('directory') ) {
    if( $(this).parent().hasClass('collapsed') ) {
        // Expand
        if( !o.multiFolder ) {
            $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
            $(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed');
        }
        $(this).parent().find('UL').remove(); // cleanup
        showTree( $(this).parent(), escape($(this).attr('rel').match( /.*\// )) );
        $(this).parent().removeClass('collapsed').addClass('expanded');
    } else {
        // Collapse
        $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
        $(this).parent().removeClass('expanded').addClass('collapsed');
    }
} else {
    h($(this).attr('rel'));
}

Looks like you can call another function inside the hasClass('directory') if clause and it will work.

So you could:

Change Line 36 to be

fileTree: function(o, h, dire) {

Between 65 and 66 add

dire($(this).attr('rel'));

If you want to have more control/flexibility/information, you can do dire($(this)); , and it will send the jQuery object instead of just the rel attribute.

Example:

$(document).ready( function() {
    $('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
        // do something when a file is clicked
    }, function(dir){
        // do something when a dir is clicked
    });
});

I have not tested it, you might need to change a couple of things around.

It worked pretty well, I just changed the last function to "dire", like it was it the code between line 65 and 66

        ... function(dire){
// do something when a dir is clicked
}