I want to design a webpage as shown in the image below. There are three panels (1,2,3). If I click on the teams (panel 1) then, the panel 2 and 3a will get filled. If I then click on a particular group (G1) then panel 3b will get populated. If I then click on particular animal (A1) then panel 3c will get filled up. The data is being obtained from Oracle database am using PHP.
I am new to AJAX. Can you please let me know the best and efficient way to do this?
Thank you
San
I would strongly advise using a Javascript framework such as jQuery for this. It takes a lot of the pain out of using AJAX (see http://api.jquery.com/jQuery.get/).
There's a couple of ways you could do retrieve the data:
The easiest way would be to generate
the entire table for (2) within a
PHP script, and load the HTML into
the container div. The downside to
this is that if you want to change
your HTML template, you've got to
change the PHP file as well.
Alternatively, you can echo the data
from you PHP in the JSON format (use
json_encode() in PHP -
http://www.php.net/manual/en/function.json-encode.php).
So you'd build your array of rows of
data and do echo
json_encode($data);. You can the
use jQuery.get( ) to load it in as
JSON.
Once you've done that, you need to clear any old rows of your table (except the heading) and add new ones. Again, jQuery would simplify the process, but it won't be easy if you haven't had much experience.
As I say, the first method is considerably easier as it only takes fairly basic PHP and Javascript. The second method is cleaner, more flexible and probably lighter on your bandwidth, but considerably more difficult.
Populating 3(a-c) is essentially the same problem. You can either generate the entire content in the PHP and simply set the container HTML, or have the basic HTML template inside the div (but hidden using CSS: display:none;) and populate that template.
If you're new with javascript/Ajax, I'd advise you check out some libraries (this is not to say that you should not learn how Javascript works without these frameworks).
A good place to start would be jquery, mootools or prototype.
These three javascript libraries have inbuilt Ajax functions designed to make your life easier.
jQuery.ajax()and parse the result appropriately.