Question

I’ve been tasked with building a new Javascript file browser but unfortunately I have to use Prototype and can’t use Jquery (at least not at the moment) due to some issues that may arise from conflicts (they have said they plan to resolve this but for the moment it looks like I may have to go with prototype). I’ve been searching on google for plugins that I can use for Prototype / Scriptaculous but they seem few and far between and all the ones I have found are geared towards use with PHP. I figure I may be able to rewrite the PHP end to Java / JSP as our application is built with Java. I just figured I would post here to see if anyone can recommend a good plugin for this that could easily be made to integrate with Java. Thanks

EDIT: This is what I mean:

http://abeautifulsite.net/blog/2008/03/jquery-file-tree/ (this is in Jquery) so I need something like this for Prototype

This is for browsing the file system of the server, not the client, so there would be a server-side page / controller that returns an HTML list, of sorts, of the files / folders and then the JavaScript manipulates this as needed to collapse / expand. There are a bunch of these written in Jquery but unfortunately I can’t seem to find one written with Prototype

Answer 1

As pointed out by Diodeus, and as demonstrated by your own example, and as probably used by most file browser plugins available it works on HTML being rendered and returned by the server. All the javascript needs to do is insert the returned HTML, Prototype has a function which does most of that for you, Ajax.Updater. You could write your own very quickly.

function expandCollapseFolder(event, folder) {
    var list = folder.down('ul');
    if (list) list.toggle();
    else new Ajax.Updater(folder, 'URL-OF-SERVER-PAGE',
    {
        parameters: { path: folder.readAttribute('data-path') },
        insertion: 'bottom'
    });
}

Event.on('ID-OF-FILE-BROWSER', 'click', 'li.folder', expandCollapseFolder);

The above is not tested code, it is meant to show how little is needed in total. The hard work is done by the server, it needs to scan and return folder contents with the appropriate file icons and URLs.

<ul>
    <li class="folder" data-path="/folder">
        <img src="folder-icon.png" />This is a folder
    </li>
    <li>
        <a href="URL-OF-FILE" target="_blank">
            <img src="file-icon.png" />This is a file
        </a>
    </li>
</ul>