Recursive JQuery Load command

Question

Hi,

I am using JQuery to load content into a div element and everything is working ok.

$("#content").load('www.urltogetcontentfor.com')

I now want to extend this. The structure I have is that of a tree where each branch may (or may not) have child branches attached to it. What I want to happen is that the JQuery load command is recursively called until there are no children attached to it. Something like the following steps:

1. call Jquery load function to load content into 'content' div.
2. if the load function returns that children are attached
3. Call JQuery load function again to get children
4. repeat steps 2 and 3 until no children are available.

Has anyone done this in JQuery or know of a plug in which handles this?

Thanks

Answer 1

Loading content recursively could be done with this principle:

function loadTree($element) {
  $element.each(function(){
    this.load('url', function(){
      loadTree(this.find('.children'));
    });
  });
}

loadTree($('#content'));

You call the function with a jQuery object. It loops through the elements in the object and calls load for each. In the success callback it picks the children in the loaded code and calls itself.

However, if possible you should try to get the entire tree using one request, for example returning the data as JSON and create elements from that.