Tricky recursive callback question
I've spent the best part of an evening looking for an answer to this on the web (and on this forum) to this problem, and don't seem to be coming up with anything - it might be that this is a very established practice and I just don't know what it's called.
My situation is this: I am making a file manager console which is split into two columns - the left column is a list of folders, and the right is a view displaying files within a specified folder. My idea was to have the right hand 'viewer' populate with content via ajax depending on which folder was selected - this works for the folder links (when you click a folder, it's content loads into the viewer via a jQuery load call), however it's the next step of functionality I'm having problems with.
Each folder is split into pages, and the problem is being caused because the page numbers are actually loaded along with the content into the viewer. Clicking on a page link should change the viewer to show the next page (and reload the page links along with the new content), however as the page links are loaded dynamically a callback is required from the load function to bind a jQuery event to the page links. This works the first time you click a page link after a folder has been loaded, but binding jQuery events to the page links after each successive page has been loaded would require, as far as I can see, essentially an infinite number of callbacks. I'm very new to jQuery, and I feel there must be something I'm doing wrong here on a conceptual level.
The page itself is not live, but please see the jQuery code I've written below (I had been experimenting with the idea of creating a JS function to carry out the jQuery on the page links and using this in the callback, it doesn't work however - this obviously needs fixing but hopefully you can get an idea of what I'm trying to do from the below):
-
$(document).ready(function() {
//Add custom scroll to left and right columns
$('#right_column').jScrollPane();
//Set global folder_id variable
folder_id = 1;
//Define a function to be used as a callback to bind click events to newly inserted page links
function page_links(){
$('#page_links > a').click(function() {
var start = $(this).attr('href');
$('#right_column').hide('slow').load("/ocm/filemanager/viewer/" + folder_id + "/" + start).jScrollPane().show('slow');
return false;
});
};
//Attach function to folder nav links - when link is clicked, load selected folder content into viewer
$('#folder_list > li > a').click(function() {
folder_id = $(this).attr('href');
$('#right_column').hide('slow').load("/ocm/filemanager/viewer/" + folder_id + "/0", '', page_links()).jScrollPane().show('slow');
return false;
});
});