SELECT from DB on tab click [w/ Ajax, maybe]

[soltek]

Hey there, I got a nice tabbed menu made with Jquery where each button/tab shows the user the related content on the atributed div, without any new loading since the whole data was already loaded at once.

 

For example, there is  COLOR tab, and the SATURATION tab. If you click on the saturation tab, it displays above the menu the saturation div:

 

<div id="saturation" class="show">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>  
  </div>  

 

... and so on.

 

The thing is the data for the tabs content comes from the php file itself, there's no interaction with a database content, and well... that kinda sucks.

 

What I was trying to do was to select the DB data and show it on the divs, BUT only when the user request to see the second tab content (it'd be a waste of bandwith, processor power and user time to load the data from 5 tabs when he doesnt wanna see any of those). I think this can be done with Ajax, so there's no need to reload the entire page over and over.

 

Could you give me a hand, 'cause I'm kinda stuck.

Thank you =)

[trq]

Kinda stuck where? Were not hear to write code for people.

[RichardRotterdam]

It's pretty much all written out for you in the jQuery UI documentation.

http://jqueryui.com/demos/tabs/#ajax