Exttracting headings from html that came from a url

[rameshc]

I have a 2 column layout where the right column is a 2-level tab panel. When I click on a second level tab, html from a url gets loaded into that panel. What I want to do is in the 'render' event callback for that panel, I want to be able to extract all the heading1 headings from the loaded html and show that as an index in the left column. What I have tried so far is to given below, but it isn't working. Any ideas on what I should be doing here?

 function panelRenderHandler(p) {
  var h1list = p.getEl().select('h1', true);
 
  var i = h1list.getCount();
 
  //if I know the count, maybe I can proceed further and add some code here
  //to build the table of contents
 }

When I run this this snippet along with the rest of my code, h1list.getCount seems to be unhappy.

[Animal]

Have you debugged?

[Condor]

Are you using autoLoad to load the content into the panel? In that case you need to use the autoLoad callback instead of the render event (fired to soon):

autoLoad: {
  url: '...',
  callback: function(el, success) {
    if (success) {
      var h1list = el.select('h1', true);
      ...
    }
  }
}

[rameshc]

The render callback was firing too early. Having a callback for the autoLoad did it.