So I'm building a web app that makes use of various jQuery UI widgets. In particular I'm using the accordion widget. I have the jQuery code which sets up the accordion like so:
$('#graph').accordion({autoHeight:false, collapsible:true});
What goes in there is, obviously, a graph. For the graph I'm using the Google AnnotatedTimeline visualization. Now, if I set an accordion option active to false OR if the accordion is collapsed, whenever I try to draw the graph, it tells me the element it's looking for isn't there. Is this because internally the div that is containing the graph becomes 'hidden' when the accordion is collapsed? If so, how can I fix that?
The reason this is important is that the user might have that accordion collapsed while working with other elements. The graph is intended to update in realtime. But if it can't even find the element it needs to draw the graph, it won't be updated.
I did figure out that the accordion does indeed set the width and height of any contained divs to 0. Thus when I tried to access it through the AnnotatedTimeline, it couldn't find a valid width or height and threw and error. So my solution was to simple add a change callback function to redraw the graph when it is selected and reset my update interval. When it gets deselected, I simply clear my update interval.