How can a jQuery plugin be reloaded/redrawn/updated to refresh its values?

Question

I believe this is easy to accomplish but I can't find how to do it. Is it possible to reload a jQuery plugin without refreshing the entire page so it can refresh its values? I've read similar questions but they're targeted to specific plugins. I'd like to know if someone knows a "generic" way to accomplish this, so it can be used in many JQ plugins.

Anyway, more specifically, I'm asking this question to reload jQuery File Tree. I've got this:

JavaScript

$(document).ready( function() {
    $('#fileTree').fileTree({
        root: '/some/path/to/somewhere/',
        script: 'js/jqueryFileTree-1.01/connectors/jqueryFileTree.php',
        folderEvent: 'click',
        expandSpeed: 1000,
        collapseSpeed: 1000,
        multiFolder: false,
        loadMessage: 'Loading...'
        }, function(file) {
            relativePath=file.replace("/some/path","");
            aFunction(relativePath, file);
        });
    });

HTML

<div id="fileTree" class="fileTree"></div>

At a certain point, I've got AJAX+PHP code that let's me delete the selected file. This works well! BUT the file that has been deleted it's still showed in the file tree. If I add a window.location.reload() in my success event in that function, obviously the entire page it's reloaded and my tree shows the actual files in the folder as intended.

Question: Is there a way to reload it without refreshing the entire page?

Please note the author of this plugin has told me on Twitter:

@metafaniel Problem is it's no longer used in any of our projects. It's an old, old script that needs an overhaul. via @abeautifulsite

@metafaniel You'll have to add that yourself. As the plugin is very old, it doesn't have a complete API. via @abeautifulsite

I don't have more time to re-write my code with another plugin, I have to finish it this way.

Answer 1

Well, if the OP is asking for a direct plugin command to do this, I'm afraid it may not exist. Here is my solution, which works pretty well. What you do is wrap your empty <div id="jstree"></div> in a parent div, something like this:

<div id="file-tree-holder">
    <div id="jstree" ></div>
</div>

Then, in your javascript, just before you instantiate your plugin, you clear the contents of the parent div, and then re-write the target div within the parent div, like so:

        $('#file-tree-holder').html('');
        $('#file-tree-holder').html('<div id="jstree" ></div>');
        $('#jstree').fileTree({
            script: '/ajax/file_tree2/' + path,
            multiFolder: true,
            expandSpeed: 250,
            collapseSpeed: 250,
            loadMessage: 'Loading...'
        });

...and it works pretty well.