Updating component's main window when clicking on sidebar

Question

I'm developing a component that will work as an explorer for Joomla, with a treeview on the sidebar and a list of elements on my component's main window . What I don't know how to do is, when clicking on a node of the treeview, updating the list of elements of the main window with the children of that node, if possible, without having to refresh the whole page. I think it has something to do with Ajax and JQuery, but have no clue on how to implement it.

Thank you!

Edit 1:

I think I haven't explained myself very well. The behaviour should be like the one in the com_media component:

Answer 1

You can use the Collapse classe of Bootstrap or the jQuery UI's accordion.

You can draw your treeview with div's, and keep some nodes hidden.

And do some onClick event to show the div content

obs.: You can do it without ajax request if you want keep it more simple.

Answer 2

Finally I was able to get a solution for this:

I created an onClick event on the sidebar which goes to a javascript function. Inside of this javascript function I received the id of the clicked node on the sidebar, and with a jQuery ajax call I post this id to a function inside the controller. In this function I get the children nodes of the passed id (from the database) and parse them to json which the success part of the ajax call receives. Here, and with this json return, I clear the id with the table and create the table again with the innerHtml property of the getbyid function.

This was the only way I could think of doing it. If someone knows another please share!